Vue 2 设置地址等配置文件

一、添加配置文件

使用static静态资源文件夹存放，文件不会被webpack主动打包

地址可自行修改
例如：
在static的根目录下创建config.json，用来存放后端地址等配置信息

{
  "BASE_URL": "http://www.xxxxx.com"
}

二、设置请求地址（生产及开发环境）

不要使用import、require等动态引入会被webpack打包写死在代码里
这里选择的是使用axios动态请求配置文件

因为生产环境及开发环境的不同，导致请求地址的不同，但为了方便生产及开发环境的协调，这里使用node进行统一处理

main.js

const path = require('path');
let url = '';
if (process.env.NODE_ENV === 'development') {
  url = path.join(__dirname, 'static', 'config.json');
} else {
  url = path.join(__dirname, 'xxxxx/static', 'config.json');
}

三、将配置信息添加到Vue原型上

这里使用的axios请求，如果没有引入axios的，需要单独引入

main.js

axios.get(url).then(s => {
  Vue.prototype.baseConfig = s.data;

  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    render: h => h(App),
    components: { App },
    template: '<App/>'
  });
}).catch(e => {
  console.log(e);
});

四、在axios请求中设置请求地址

在.vue文件中可直接使用 this.baseConfig
在.js文件中使用函数动态调用，示例如下

这里我的在 main.js 中引入的是自行封装处理过的axios，如未封装的同学，可自行修改请求地址即可

function getBaseUrl () {
  let url;
  if (process.env.NODE_ENV === 'development') {
    url = process.env.API_ROOT
  } else {
    url = Vue.prototype.baseConfig.BASE_URL
  }
  return url;
}