環境變數 Vue 環境變數的使用

2021-10-14 17:48:07 字數 1048 閱讀 8607

文章背景

開發過程中經常遇到這樣的問題:

相同的**部署到不同環境時需要使用不同的變數:

比如介面網域名稱變數」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編輯系統變數視窗不一樣 以 開頭,所有變數在同一行 不以 開頭,所有變數不在同一行 ...