在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能根据不同环境打包就完美了。
代码如下:
1.config/prod.env.js
文件修改如下:
'use strict'
//npm 提供一个npm_lifecycle_event变量,返回当前正在运行的脚本名称,比如pretest、test、posttest等等。所以,可以利用这个变量,在同一个脚本文件里面,为不同的npm scripts命令编写代码。
const target = process.env.npm_lifecycle_event;
let obj;
if (target == 'test') {
//测试服
obj = {
NODE_ENV: '"production"',
BASE_URL: '"https://xxxxx"'
}
} else {
//正式服
obj = {
NODE_ENV: '"production"',
BASE_URL: '"https://xxxxx"'
}
}
module.exports = obj;
2.package.json
中修改如下:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"test": "node build/build.js"
},
3.打包上线
//打包测试服文件
npm run test
//打包正式服文件
npm run build