1. 安装打包插件
安装如下插件,以便可以在打包命令中设置环境变量区分不同的环境。
javascript
npm install --save-dev cross-env
2. 配置打包命令
在package.json中配置正式环境和测试环境打包命令,同时添加一个命令同打包两个环境。
javascript
// package.json
"scripts": {
"dev": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"prod": "rimraf dist_prod && cross-env BUILD_ENV=prod NODE_ENV=production vue-cli-service build", // 正式环境包
"test": "rimraf dist_test && cross-env BUILD_ENV=test NODE_ENV=production vue-cli-service build", // 测试环境包
"build": "rimraf dist_prod dist_test && cross-env BUILD_ENV=prod NODE_ENV=production vue-cli-service build && cross-env BUILD_ENV=test NODE_ENV=production vue-cli-service build" // 一键打包命令
},
3. 配置打包输出
在vue.config.js中添加打包输出配置,其中正式环境打包输出到dist_prod文件夹,测试环境打包输出到dist_test文件夹。
javascript
// vue.config.js
const outputDir = "dist_" + process.env.BUILD_ENV;
if(process.env.BUILD_ENV=="prod"){
process.env.VUE_APP_BASE_API = "https://api.xxxx.com" // 正式环境地址
}else if(process.env.BUILD_ENV=="test"){
process.env.VUE_APP_BASE_API = "https://test_api.xxxx.com" // 测试环境地址
}
module.exports = {
outputDir: outputDir,
}
通过以上3步,就可以执行npm run build同时打包出两个环境的项目包了。