vue-cli配置数据接口的baseurl

0. 写在前面

之前一直都是将axios的baseurl写在二次封装的api.js中：

const PRODUCT = 'http://47.112.135.251:8081';   //test net
const LOCAL = '/url';

然后通过axios.defaults.baseURL = PRODUCT或LOCAL;来切换baseURL，每次打包的时候都要手动切换。
本来没觉得繁琐，一直都这样用，都怪自己蠢，不知道偷懒。后来去面试的时候，被面试官问起这个问题，我说出自己方法，面试官表示很惊讶，一直问我手动切换啊手动切换啊，我都不好意思说是。
感觉自己被深深的鄙视了，回来一定要好好学学webpack！！！

1. 配置

找到config/dev.env.js和config/prod.env.js
config/dev.env.js中这样设置（注意API_ROOT中的值要用引号引起来）：

'use strict';
const merge = require('webpack-merge');
const prodEnv = require('./prod.env');

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API_ROOT: '"/url"'  // 代理接口
});

config/prod.env.js中这样设置：

'use strict';
module.exports = {
    NODE_ENV: '"production"',
    API_ROOT: "'http://xxx.xxx.xxx.xxx:8081'"   // 正式接口
};

当然 ，这里没有考虑多种后台接口的情况。如果有，在代理接口出要坐一下判断。

2. 使用

在axios的二次封装文件api.js中

axios.defaults.baseURL = process.env.API_ROOT;

这样，在开发环境自动用/url，编译环境自动用正式接口