vue不同環境的壓包配置方法(vue-cli 3.0)

clg333zzz發表於2018-09-18
Vue

最新的vue-cli 3.0變化非常大。但是不同環境的壓包配置方法更加簡單了。

環境變數與模式

檢視官方文件

我們主要配置兩種模式，測試環境及生產環境。

我們在專案根目錄建立兩個檔案：

.env.development

VUE_APP_API_URL_WEB=https://testa-test.com
VUE_APP_API_URL_APP=https://testb-test.com
複製程式碼

這個配置檔案用於vue-cli-service serve，如果有修改，需要重新啟動專案才會使用最新的變數。

.env.production

VUE_APP_API_URL_WEB=https://testa.com
VUE_APP_API_URL_APP=https://testb.com
複製程式碼

這個配置檔案用於vue-cli-service build。

package.json配置修改

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
+ "build:prod": "vue-cli-service build --mode production",
+ "build:dev": "vue-cli-service build --mode development",
  "lint": "vue-cli-service lint"
},
複製程式碼

壓包命令

測試環境壓包

npm run build:dev
複製程式碼

vue-cli-service build --mode development
通過傳遞 --mode 選項引數為命令列覆寫預設的模式。
這裡用development的模式覆寫build預設使用的production模式。

生產環境壓包

npm run build
複製程式碼

或者

npm run build:prod
複製程式碼

更多環境壓包

這裡假設我們還有另外一個環境prodev需要壓包，這時候我們需要新增對應的命令，並新增對應的配置。

新增配置檔案

在根目錄新增一個配置檔案.env.prodev。

.env.prodev

NODE_ENV=production
VUE_APP_API_URL_WEB=https://testa-prodev.com
VUE_APP_API_URL_APP=https://testb-prodev.com
複製程式碼

注意這裡如果不新增NODE_ENV=production，那最終打包時NODE_ENV值為development。

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
+ "build:prod": "vue-cli-service build --mode production",
+ "build:dev": "vue-cli-service build --mode development",
+ "build:prodev": "vue-cli-service build --mode prodev",
  "lint": "vue-cli-service lint"
},
複製程式碼

壓包

npm run build:prodev
複製程式碼

總結

vue-cli 3.0的不同環境壓包設定現在是真的非常方便了。 還有其他的配置自由度都非常高，有待更多的探索。

相關文章