vue加载外部json配置文件

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

这就需要在项目根目录 创建static目录,它应该与src为同级目录。

vue加载外部json配置文件

 

 

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

  },

 

vue加载外部json配置文件

上一篇:转:2016年崛起的js项目


下一篇:使用JSONObject对象将HashMap转换成String