需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置。
实现方法如下:
1.在项目的static目录下创建project.config.json文件(名称随意,建议带上config关键字,易于辨识)
内容为json格式:
1 {2 "serviceUrl": "http://localhost:30001/service/api/",3 "baseUrl": "https://192.168.1.161/data/",4 "accessToken": "pk.eyJ1Ijf1w",5 "geoFenceRadius": 20,6 "retrieveInterval": 50007 }
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: '' 9 })10 }).catch((error) => {11 console.log('get baseConfig error...' + error)12 })
注意:
读取配置信息用到了axios,需先安装并引入
1 // 命令行安装2 npm install axios -S3 // 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
4.build后可以在static目录下看的添加的配置文件