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

  },