Vue一下25日:環境變數mode & .env檔 | vue-cli-service build mode
官網:环境变量和模式[1]、只在本地有效的变量[2]在官網有說明有些檔案會在git被忽略,因為專案目錄下有個檔案.gitignore裡已有預設副檔名為.local的檔案會被忽略。透過package.json設定serve來切換特定環境,也就是在終端機下的npmrunserve/npmrunbuild指令(開發環境、正式環境間的切換):(package.json)scripts:{server:vue-cli-serviceserve--modeName//加入--modeName}如果環境配置檔名為.env.development,那就會變成預設套用的配置檔,也就是說server:vue-cli-serviceserve等同於server:vue-cli-serviceserve--modedevelopment...
官網:环境变量和模式[1]、只在本地有效的变量[2]在官網有說明有些檔案會在 git被忽略,因為專案目錄下有個檔案.gitignore裡已有預設副檔名為.local的檔案會被忽略。
透過package.json設定serve來切換特定環境,也就是在終端機下的npm run serve/npm run build指令(開發環境、正式環境間的切換):(package.json)
scripts:{ server: vue-cli-service serve --mode Name//加入--mode Name }如果環境配置檔名為 .env.development,那就會變成預設套用的配置檔,也就是說
server: vue-cli-service serve等同於
server: vue-cli-service serve --mode development與.env相比,.env.development權重較高;命名為.env.production則是build的預設環境檔上述預設值可以看官網這裡:模式[3]
常會有在開發環境下使用的變數與正式環境的變數不同的情況,我們在.env檔裡面宣告(.env)
VUE_APP_TITLE:My App這裡用大寫筆者推測應是習慣,讓其他開發者也能很快注意到他是環境變數。然後去App.vue用console.log看結果
<script> 其他程式碼 export defalut { 其他程式碼 created() { console.log(process.env.VUE_APP_TITLE) } }重啟npm run serve後觀察開發者工具。
切換指定環境創建一個指定環境變量來測試及說明如何切換(.env.PP)
VUE_APP_TITLE=My App, localApp.vue同上,不過要修改package.json
server: vue-cli-service ...