vue-cli配置数据接口的baseurl
0. 写在前面之前一直都是将axios的baseurl写在二次封装的api.js中:const PRODUCT = 'http://47.112.135.251:8081';//test netconst LOCAL = '/url';然后通过axios.defaults.baseURL = PRODUCT或LOCAL;来切换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,编译环境自动用正式接口
更多推荐
已为社区贡献4条内容
所有评论(0)