vue-cli環境變量與模式

模式

環境變量

環境文件加載優先級

示例：Staging 模式

在客戶端側代碼中使用環境變量

public/index.html

只在本地有效的變量

推薦閱讀

你越是認真生活，你的生活就會越美好——弗蘭克·勞埃德·萊特

《人生果實》經典語錄

vue-cli3.0移除了配置文件目錄： config和build文件夾。改為.env自定義配置環境變量和模式

日常工作中，主要用來區分本地開發環境，測試環境，正式環境的全局配置，例如服務器地址、接口地址、websocket地址…… ，通過環境變量和模式，方便管理

模式

模式是 Vue CLI 項目中一個重要的概念。

默認情況下，一個 Vue CLI 項目有三個模式：

development 模式用于 vue-cli-service serve

test 模式用于 vue-cli-service test:unit

production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

你可以通過傳遞--mode 選項參數為命令行覆寫默認的模式。

例如，如果你想要在構建命令中使用開發環境變量：

vue-cli-service build --mode development

當運行 vue-cli-service 命令時，所有的環境變量都從對應的環境文件中載入。

如果文件內部不包含NODE_ENV變量，它的值將取決于模式

例如，在production 模式下被設置為 “production”，在 test 模式下被設置為 “test”，默認則是 "development"。

NODE_ENV 將決定您的應用運行的模式，是開發，生產還是測試，因此也決定了創建哪種 webpack 配置。

例如通過將 NODE_ENV 設置為 "test"，Vue CLI 會創建一個優化過后的，并且旨在用于單元測試的 webpack 配置，它并不會處理圖片以及一些對單元測試非必需的其他資源。

同理，NODE_ENV=development 創建一個webpack 配置

該配置啟用熱更新，

不會對資源進行 hash 也不會打出 vendor bundles

目的是為了在開發的時候能夠快速重新構建。

當你運行 vue-cli-service build 命令時，無論你要部署到哪個環境，應該始終把 NODE_ENV 設置為 "production"來獲取可用于部署的應用程序。

NODE_ENV

如果在環境中有默認的 NODE_ENV，你應該移除它或在運行 vue-cli-service 命令的時候明確地設置 NODE_ENV。

環境變量

你可以在你的項目根目錄中放置下列文件來指定環境變量：

.env # 在所有的環境中被載入

.env.local # 在所有的環境中被載入，但會被 git 忽略

.env.[mode] # 只在指定的模式中被載入

.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略

一個環境文件只包含環境變量的“鍵=值”對：

FOO=bar

VUE_APP_NOT_SECRET_CODE=some_value

警告

不要在你的應用程序中存儲任何機密信息(例如私有 API 密鑰)！

環境變量會隨著構建打包嵌入到輸出代碼，意味著任何人都有機會能夠看到它。

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

這是為了避免意外公開機器上可能具有相同名稱的私鑰。

// .env

FOO=foo

BAR=bar

CONCAT=$FOO$BAR

# CONCAT=foobar

被載入的變量將會對 vue-cli-service 的所有命令、插件和依賴可用。

PS:

在客戶端中，也就是src目錄下使用環境變量的話，必須以VUE_APP_開頭。例如我們可以在src/main.js中直接輸出：console.log(process.env.VUE_APP_NOT_SECRET_CODE)

在webpack配置中使用，沒限制，可以直接通過process.env.XXX來使用

環境文件加載優先級

為一個特定模式準備的環境文件 (例如.env.production) 將會比一般的環境文件 (例如 .env) 擁有更高的優先級。

此外，Vue CLI 啟動時已經存在的環境變量擁有最高優先級，并不會被 .env 文件覆寫。

.env 環境文件是通過運行 vue-cli-service 命令載入的，因此環境文件發生變化，需要重啟服務。

示例：Staging 模式

假設我們有一個應用包含以下.env 文件：

VUE_APP_TITLE=My App

和.env.staging 文件：

NODE_ENV=production

VUE_APP_TITLE=My App (staging)

vue-cli-service build 會加載可能存在的 .env、.env.production 和 .env.production.local 文件然后構建出生產環境應用。

vue-cli-service build --mode staging 會在 staging 模式下加載可能存在的 .env、.env.staging 和 .env.staging.local 文件然后構建出生產環境應用。

這兩種情況下，根據 NODE_ENV，構建出的應用都是生產環境應用，但是在 staging 版本中，process.env.VUE_APP_TITLE 被覆寫成了另一個值。

在客戶端側代碼中使用環境變量

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中

你可以在應用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)

在構建過程中，process.env.VUE_APP_SECRET 將會被相應的值所取代。在 VUE_APP_SECRET=secret 的情況下，它會被替換為 “secret”。

除了 VUE_APP_* 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量：

NODE_ENV:會是 “development”、"production" 或 “test” 中的一個。具體的值取決于應用運行的模式。

BASE_URL: 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

所有解析出來的環境變量都可以在public/index.html 中以 HTML 插值中介紹的方式使用。

vue-cli HTML 和靜態資源

public/index.html

public/index.html 文件是一個會被 html-webpack-plugin 處理的模板。在構建過程中，資源鏈接會被自動注入。

因為 index 文件被用作模板，所以你可以使用 lodash template 語法插入內容：

用來做不轉義插值；

用來做 HTML 轉義插值；

用來描述 JavaScript 流程控制。

除了被html-webpack-plugin 暴露的默認值之外，所有客戶端環境變量也可以直接使用。例如，BASE_URL 的用法：

提示

你可以在vue.config.js 文件中計算環境變量。它們仍然需要以 VUE_APP_ 前綴開頭。這可以用于版本信息:

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {

// config

}

只在本地有效的變量

有的時候你可能有一些不應該提交到代碼倉庫中的變量，尤其是當你的項目托管在公共倉庫時。

這種情況下你應該使用一個.env.local 文件取而代之。本地環境文件默認會被忽略，且出現在 .gitignore 中。

.local也可以加在指定模式的環境文件上，比如.env.development.local將會在 development 模式下被載入，且被 git 忽略。

推薦閱讀

連點成線

Vue源碼學習目錄

vue-cli官網 模式和環境變量

謝謝你閱讀到了最后~

期待你關注、收藏、評論、點贊~

讓我們一起 變得更強

關于找一找教程網

本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。

本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章，希望廣大程序員努力學習，讓我們用科技改變世界。

[vue-cli環境變量與模式]http://www.zyiz.net/tech/detail-159298.html

總結

以上是生活随笔為你收集整理的vue index.html环境变量,vue-cli环境变量与模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。