编程知识 cdmana.com

vue-cli 多環境構建打包

多環境簡介

官方文檔:https://cli.vuejs.org/zh/guide/mode-and-env.html

環境文件的命名規則:

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

文件中以"鍵=值"的形式配置環境變量,如果不同文件存在同名的環境變量,保留高優先級文件中的值。優先級為:.env.[mode].local > .env.[mode] > .env.local > .env

請注意,只有 NODE_ENVBASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態地嵌入到客戶端側的代碼中。

嵌入的意思就是說,在客戶端代碼中可以訪問到這些環境變量。比如可以這樣獲取變量:console.log(process.env.VUE_APP_SECRET)

構建時指定環境

環境機制是vue-cli實現的,事實上,我們需要指定vue-cli的mode參數才能實現不同環境的構建,命令格式為:vue-cli-service build --mode {mode}

回想一下,我們構建時一直用的是npm run build。其實這行命令本質就是執行vue-cli-service build,它兩的對應關系維護在 package.json。打開 package.json,你會發現這段配置:

  ...
  "scripts": {
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  ...

當我們運行npm run build,node就會去找 scripts對象中的 build屬性的值,也就是vue-cli-service build來執行。
抽象點錶示就是:npm run { key} --> scripts[key]

這樣的話,要想指定 vue-cli的mode參數,那我們就幹脆直接在scripts多加幾條命令得了。如下:

  ...
  "scripts": {
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod1": "vue-cli-service build --mode prod1",
    "build:prod2": "vue-cli-service build --mode prod2"
  },
  ...

當執行 npm run build:prod1,實際會執行 vue-cli-service build --mode prod1,這個命令指定了構建時使用 prod1 環境。相應的就會讀取 .env.prod1 環境配置。

總結

  1. 維護不同環境的環境配置。命令格式:.env.[mode]
  2. 在package.json的scripts屬性增加指定了環境的配置。格式:vue-cli-service build --mode [mode]
  3. 使用scripts的key值進行構建。格式:npm run [key]

版权声明
本文为[markix]所创,转载请带上原文链接,感谢
https://cdmana.com/2022/01/202201080559015507.html

Scroll to Top