env文件说明
.env：默认全局配置文件
.env.local：本地覆盖。除 test 之外的所有环境都加载此文件
.env.development, .env.test, .env.production：特定环境配置文件
.env.development.local, .env.test.local, .env.production.local：特定环境配置本地文件，但会被 git 忽略
.env # 默认全局配置文件，在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
1、创建三个 .env 文件
image.png
2、配置 env 文件
配置环境变量格式
VUE_APP_{自定义环境变量名} = {值}
需要注意在vue脚手架创建的项目中需要设置环境变量配置以VUE_APP_*开头
.env.development
NODE_ENV = 'development'
VUE_APP_ENV = 'development'
.env.production
NODE_ENV = 'production'
VUE_APP_ENV = 'production'
outputDir = 'dist'
.env.test
NODE_ENV = 'production'
VUE_APP_ENV = 'test'
outputDir = 'dist'
3、 根据VUE_APP_ENV来区分不同环境
创建 config.js 文件
// 区分不同的配置环境
let serverUrl;
if (process.env.VUE_APP_ENV === 'development') {
serverUrl = "http://localhost:10001/";
}
else if (process.env.VUE_APP_ENV === 'test') {
serverUrl = "http://test.abc.com/";
}
else if (process.env.VUE_APP_ENV === 'production') {
serverUrl = "http://prod.abc.com/";
}
4、配置打包命令
在根目录下的 vue.config.js 里配置outputDir
module.exports = {
// 基本路径
publicPath: "./",
// 输出文件目录
outputDir: process.env.outputDir,
};
package.json 配置打包命令
"scripts": {
"serve": "vue-cli-service serve --open",
"test": "vue-cli-service build --mode test",
"build": "vue-cli-service build"
},
执行 npm run serve 输出的是 .env.development 中的内容
执行 npm run build 输出的是 .env.production 中的内容
原文链接：https://blog.csdn.net/wangooo/article/details/120006881
