文章背景
開發過程中經常遇到這樣的問題:
相同的**部署到不同環境時需要使用不同的變數:
比如介面網域名稱變數」serve」,在測試環境和生產環境使用的是不同的網域名稱。
這種情況下如果在**裡定義變數,打包部署前再修改**切換成不同的值再打包不利於**的維護,也很繁瑣。
這時候利用環境變數來實現,在不用每次打包前改變變數的情況下,通過不同的打包命令在**中使用不同的網域名稱,或者其他自定義變數。
概念簡介
1、環境變數使用方法
process.env.[變數名]
vue專案預設有兩個環境變數process.env.node_env和process.env.base_url
.env配置檔案中的環境變數在所有模式下可用,我們要在指定模式下增加環境變數,需要在根目錄下建立.env.[模式名稱]檔案,例如.env.buildtest檔案中定義的環境變數只在buildtest模式下生效
環境變數定義方式是用等號連線的鍵值對:
例:node_env=production
這裡需要注意一下,node_env用來識別當前打包環境的
2、如何構建不同模式的工程
在package.json中增加如下**
"scripts":
然後執行npm run test就可以構建buildtest模式下的工程了
具體實現
1、在根目錄下建立不同模式的配置檔案
比如有test和uat兩套環境,配置檔案如下
.env.buildtest中增加如下配置
.env.uat中增加如下配置
2、package.json中的scripts配置項增加以下配置
"scripts":
**中使用環境變數構建版本
test環境通過npm run test命令構建
uat環境通過npm run uat命令構建
Vue 環境變數
env 在所有的環境中被載入 env.local 在所有的環境中被載入,但會被 git 忽略 env.mode 只在指定的模式中被載入 env.mode local 只在指定的模式中被載入,但會被 git 忽略 乙個環境檔案只包含環境變數的 鍵 值 對 如果是使用生產環境的話 要進行打包 然後在打包...
vue環境變數
1,關於檔名 必須以如下方式命名,不要亂起名,也無需專門手動控制載入哪個檔案 env 全域性預設配置檔案,不論什麼環境都會載入合併 env.development 開發環境下的配置檔案 env.production 生產環境下的配置檔案 2,關於內容 3,關於檔案的載入 根據啟動命令vue會自動載入...
環境變數使用
在安裝軟體的過程中,經常用到環境變數,這裡記錄環境變數相關的一些操作 1 進入環境變數 路徑 電腦右鍵 屬性 高階系統設定 環境變數 我們主要編輯系統變數,任何使用者都可共享 使用者變數只作用於對應賬號 2 path編輯系統變數視窗不一樣 以 開頭,所有變數在同一行 不以 開頭,所有變數不在同一行 ...