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.jsconfig/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,编译环境自动用正式接口

Logo

前往低代码交流专区

更多推荐