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目录下看到添加的配置文件

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

推荐阅读