vue加载外部json配置文件

在vue开发中遇到 加载json配置文件，而且这个配置文件不应被打包

这就需要在 public 目录下 创建static目录 。

 

 在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()

  },

 取值

HttpUrl=this.apiUrl;
console.log("AddressGridView "+ this.apiUrl  );