此處主要討論的是大於等於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_
開頭來做判斷,進行個性化處理。