• Vue项目创建build后可修改的配置文件


    需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置。

    实现方法如下:

    1.在项目的static目录下创建project.config.json文件(名称随意,建议带上config关键字,易于辨识)

    内容为json格式:

    1 {
    2   "serviceUrl": "http://localhost:30001/service/api/",
    3   "baseUrl": "https://192.168.1.11/data/",
    4   "accessToken": "pk.eyJ1Ijf1w",
    5   "geoFenceRadius": 20,
    6   "retrieveInterval": 5000
    7 }

    2.在main.js中读取该配置

    读取到配置后放入 Vue.prototype.baseConfig中,(baseConfig名称可自定义)

    为了保证能在vue实例中配置随时可用,把vue的创建放到了axios读取配置的回调里面。

    代码如下:

     1 /* eslint-disable no-new */
     2 axios.get('./static/project.config.json').then((result) => {
     3   Vue.prototype.baseConfig = result.data
     4   new Vue({
     5     el: '#app',
     6     router,
     7     components: {App},
     8     template: '<App/>'
     9   })
    10 }).catch((error) => {
    11   console.log('get baseConfig error...' + error)
    12 })

    注意:

    读取配置信息用到了axios,需先安装并引入

    1 // 命令行安装
    2 npm install axios -S
    3 // main.js 引入
    4 import axios from 'axios'

    3.使用配置

      a.组件中使用,因为baseCofig已放入Vue.prototype中,组件中不需要引入,直接使用this获取

    1 this.baseConfig.baseUrl

      b. js文件中使用,需要先引入Vue,通过Vue.prototype获取配置

    1 import Vue from 'vue'
    2 let basetConfig = Vue.prototype.baseConfig //注意该行应放在export里面,否则获取不到值

    4.build后可以在static目录下看到添加的配置文件

  • 相关阅读:
    C++雾中风景1:友元类与面向对象
    NFS服务器的安装与配置
    未来工作相关
    python 函数
    pycharm、sublime个性化设置
    hadoop中HDFS的NameNode原理
    Cat搭建遇坑记
    美团点评CAT监控平台研究
    阿里sentinel源码研究深入
    阿里熔断限流Sentinel研究
  • 原文地址:https://www.cnblogs.com/jyughynj/p/11207436.html
Copyright © 2020-2023  润新知