env文件說明
.env：默認全局配置文件
.env.local：本地覆蓋。除 test 之外的所有環(huán)境都加載此文件
.env.development, .env.test, .env.production：特定環(huán)境配置文件
.env.development.local, .env.test.local, .env.production.local：特定環(huán)境配置本地文件，但會被 git 忽略

.env                # 默認全局配置文件，在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入

1、創(chuàng)建三個 .env 文件

image.png

2、配置 env 文件
配置環(huán)境變量格式

VUE_APP_{自定義環(huán)境變量名} = {值}
需要注意在vue腳手架創(chuàng)建的項目中需要設置環(huán)境變量配置以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、 根據(jù)VUE_APP_ENV來區(qū)分不同環(huán)境
創(chuàng)建 config.js 文件

// 區(qū)分不同的配置環(huán)境

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"
  },

執(zhí)行 npm run serve 輸出的是 .env.development 中的內容

執(zhí)行 npm run build 輸出的是 .env.production 中的內容
原文鏈接：https://blog.csdn.net/wangooo/article/details/120006881