javascript - vue-cli怎么根据后端接口服务器不同 build不同接口代码?
本文介绍了javascript - vue-cli怎么根据后端接口服务器不同 build不同接口代码?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
开发过程中 npm run dev 组件中接口调取的地址是 全局global定义的一个API变量如下:
// 开发环境打开
// global.API = '/api';
// 测试环境打开
// global.API = '/test';
// uat环境打开
// global.API = '/uat';
// 生产环境打开
// global.API = '/www';
生产环境 npm run build 时如何根据不同接口自动改变API成生产环境变量?
解决方案
琢磨了几天vue-cli生成的代码,vue觉得你只需要三种配置:开发(npm run dev)、生产(npm run build)和单元测试(npm run test)。。。
吐槽完。
1.打开config/index.js
,修改build
里面的env
文件名为根据环境变量获取,
修改完大概是下面这样子:
module.exports = {
build: {
env: require('./'+(process.env.VUE_CONFIG||'prod')+'.env'),
//......
2.在config目录里面把prod.env.js
复制两份,分别是uat.env.js
、testing.env.js
3.修改dev.env.js
、uat.env.js
、testing.env.js
、prod.env.js
这四个文件,在大括号里面添加API: '"/api或uat或其他什么"'
,如下:
module.exports = {
NODE_ENV: '"production"',
API: '"/api"'
}
4.然后就可以在任何地方通过process.env.API
访问到这个变量了。
5.打包的时候,先设置环境变量VUE_CONFIG
,例如export VUE_CONFIG=uat && npm run build
。
这篇关于javascript - vue-cli怎么根据后端接口服务器不同 build不同接口代码?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文