1. 在根目录下新建 .env.xx (xx可以是自己取的用来区分这三个环境）
下面是我新建的，分别对应测试环境，开发环境，正式环境
image.png
2. 配置
- 测试环境：
- 测试环境和正式环境一样都是需要打包所以NODE_ENV都是'production'，VUE_APP_FLAG是我们自己取的用来区分环境的变量，为了和正式环境打包完的dist区分，我们指定测试环境的输出目录outputDir
NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = 'beta'
- 开发环境：
NODE_ENV = 'development'
VUE_APP_FLAG = 'development'
- 正式环境：
NODE_ENV = 'production'
VUE_APP_FLAG = 'production'
outputDir = 'dist'
3. 接下来我们就可以根据VUE_APP_FLAG来区分不同环境啦
- 比如我用来区分接口
/**
* 接口管理
*/
let baseURL;
if (process.env.VUE_APP_FLAG == "development") {
baseURL = "xx";
} else if (process.env.VUE_APP_FLAG == "production") {
baseURL = "xx";
} else if (process.env.VUE_APP_FLAG == "test") {
baseURL = "xx";
}
const base = {
baseurl: baseURL
};
export default base;
3. 配置打包命令
- 既然我们打包完要区分测试环境和正式环境，需要配置一下命令
- 在根目录下新建vue.config.js，用来配置outputDir
module.exports = {
// 基本路径
publicPath: "./",
// 输出文件目录
outputDir: process.env.outputDir,
};
- package.json配置打包命令
"build": "vue-cli-service --no-clean build --mode production && vue-cli-service build --mode beta",
现在当你执行完npm run build就会生成dist和beta文件夹啦
