首页 > Web开发 > 详细

vue加载外部json配置文件

时间:2021-01-08 09:29:37      阅读:408      评论:0      收藏:0      [点我收藏+]

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

  },

 

vue加载外部json配置文件

原文:https://www.cnblogs.com/hailexuexi/p/14249184.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!