我们可以根据通过不同命令切换不同环境对应的请求接口的url
npm run dev // 开发环境
npm run prod // 生产环境
npm run test // 测试环境
1.将package.json中添加配置不同命令
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"test": "vue-cli-service serve --mode test",
"pro": "vue-cli-service serve --mode pro",
"build:test": "vue-cli-service build --mode test",
"build:pro": "vue-cli-service build --mode pro",
"build": "vue-cli-service build"
},
然后在项目根目录新建.env文件,设置环境为生产,设置标识为prod
NODE_ENV = 'production'
VUE_APP_FLAG = 'prod'
在新建.env.test文件outputDir为输出的文件目录
NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test
所以可在新建一个vue.config.js
module.exports = {
outputDir: process.env.outputDir
}
最后在main.js中来判断当前环境为什么环境,设置对应的api
if (process.env.NODE_ENV === 'production') {
if (process.env.VUE_APP_FLAG === 'pro') {
//prod生产环境
console.log('设置生产环境api接口url')
} else {
//test 测试环境
console.log('测试环境api接口url')
}
} else {
//dev 开发环境
console.log('开发环境api接口url')
}
最后执行命令看下结果
npm run dev // 开发环境
npm run prod // 生产环境
npm run test // 测试环境