這篇文章主要為大家展示了什么是vue全局環境變量和模式，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
我們可以在項目根目錄中的下列文件來指定環境變量：
.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
一個環境文件只包含環境變量的“鍵=值”對,并且必須以VUE_APP開始:
FOO=bar //無效
VUE_APP_SECRET=secret 有效
模式
模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：
了解模式以后，我們可以為對應環境設置相應的環境變量，比如：
如果只需要在本地使用的話，可以在后面加入.local,比如 .env.local ,會git 忽略
在客戶端側代碼中，可以使用 process.env.VUE_APP_* 獲取應用
注：process.env.NODE_ENV，獲取應用運行模式( "development" 、 "production" 或 "test" )
process.env.BASE_URL,應用基礎路徑( vue.config.js 中的 publicPath 選項)
ps：下面看下淺談vue中環境變量和模式的作用
使用vue框架進行前端開發也有一段時間了，遇到的問題可以大致分為2類：開發問題，部署問題。
開發方面的問題是最多的，也是大家經常會遇到的，但是部署的問題也不容小覷，一旦部署出錯會造成嚴重的上線事故。
開發和測試時調用后臺接口的地址是和生產環境中不一樣的，有些時候需要跳轉到其他網頁，也需要測試和生產環境跳轉不同的頁面。
這些配置如果都用人工來維護，上測試環境注釋掉生產的代碼，上生產環境注釋掉測試的代碼，會很麻煩也很容易出錯。
所以有必要在一個入口進行控制，這就要用到vue框架中的環境變量和模式。
在vue-cli3構建的項目中，項目根目錄下創建.env.[模式]文件可以定義一種模式，在這個文件中定義的變量就是對應模式的環境變量。
在本地啟動項目默認是使用的development模式，使用build命令打包默認是使用的production模式。但是我們一般都會有一個測試環境，在我們打測試包和生產包的時候都是用的是production模式，所以需要定義一個環境變量來進行區分。
我目前的做法是創建.env.development，.env.test，.env.production三個模式文件。
每個模式文件中有3個環境變量：NODE_ENV（對應當前模式的名稱），VUE_APP_RUNTIME_ENV（對應當前環境的名稱），VUE_APP_BASE_URL（當前環境向后臺發請求的baseurl）。
vue-cli3構建的項目中默認只有development模式和production模式，默認的NODE_ENV分別是development和production，很多配置也只依據NODE_ENV區分這2種模式，但是我們需要有3種模式。生產和測試的包應該是除了環江變量不同，其他都相同，所以同屬production模式。用額外的VUE_APP_RUNTIME_ENV來區分production和test環境。
定義完成之后，在項目中使用process.env.VUE_APP_RUNTIME_ENV即可訪問到變量的值。
package.json中也需要定義一條打測試包的命令：
"build-test": "vue-cli-service build --mode test"
表示打一個使用測試配置的身生產包。
以上就是關于什么是vue全局環境變量和模式的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
