vue cli3項目多環境打包配置

此處主要討論的是大於等於3種環境的打包配置，如果只有兩種的話NODE_ENV 會是development、production ，這樣的一般比較簡單，下面將多種環境的配置，兩種的可以參考類比。

首先配置package.json

{
    ...
    "scripts": {
        // 開發
		"dev": "vue-cli-service serve",
        // 測試
		"build:dev": "vue-cli-service build --mode development",
        // 生產
		"build:pro": "vue-cli-service build --mode production",
        // 其它2
		"build:feat": "vue-cli-service build --mode feat",
        // 其它2
		"build:fix": "vue-cli-service build --mode fix"
	},
    ...
}

默認情況下，一個 Vue CLI 項目有三個模式：

• development 模式用於 vue-cli-service serve
• production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用於 vue-cli-service test:unit

--mode 選項參數爲命令行覆寫默認的模式。

其次新建.env開頭的文件

在項目根目錄創建

# 文件名 .env.feat
NODE_ENV = 'feat'

# 文件名 .env.fix
NODE_ENV = 'fix'

#爲註釋，文件名的後綴要和package.json中配置mode的一樣，開頭統一爲.env。這樣配置之後可以通過process.env.NODE_ENV來判斷不同環境下配置

或者也可以通過其他變量來做判斷

# 文件名 .env.fix
NODE_ENV = 'production'
VUE_APP_BASE = 'fix'

可以通過process.env.VUE_APP_BASE來獲取變量做相應的配置，NODE_ENV也可以是development，注意：變量必須是VUE_APP_開頭纔可以；BASE_URL 變量 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

最後就是根據環境變量和模式更改配置

不同人不同項目有不同的需求更改配置，主要分爲兩種，一種是打包的配置，即根據不同環境進行不同的打包配置，修改vue.config.js；一種是項目配置，一般是修改不同的請求地址。項目內和vue.config.js中都可以獲取 process.env下的對象屬性NODE_ENV或者VUE_APP_開頭來做判斷，進行個性化處理。