在vue开发中遇到 加载json配置文件,而且这个配置文件不应被打包
这就需要在项目根目录 创建static目录,它应该与src为同级目录。
在static目录下 创建 config.json 文件 ,文件内容如下:
{ "apiUrl": "http://localhost/VueApi" }
读取方法分两种
一、在main.js 文件中直接读取、调用
Vue.prototype.$http.get(‘static/config.json‘).then((res)=>{ //console.log(‘11111111‘); var apiUrl= res.data.apiUrl; console.log(‘apiUrl ‘+apiUrl); axios.defaults.baseURL =apiUrl;//‘http://localhost/VueApi‘; }).catch(err => { console.log("apiUrl "+err); })
这样 取到 apiUrl 后 直接赋给 axios.defaults.baseURL
二、在main.js读取 并 在 任意 *.vue 页面上调用
//获取 外部config.json Vue.prototype.$http = axios; Vue.prototype.getConfig = function () { //this.$http.get(‘../static/config.json‘).then(res => { this.$http.get(‘static/config.json‘).then((res)=>{ Vue.prototype.apiUrl = res.data.apiUrl; console.log(‘11111111‘); console.log(Vue.prototype.apiUrl); }).catch(err => { console.log(err); //console.log(‘22222‘); }) }
调用方法
mounted() { //页面 加载完毕 必须要有 this. //console.log(this.getConfig()); this.getConfig() },