我們可以在項(xiàng)目根目錄中的下列文件來(lái)指定環(huán)境變量：

.env                # 在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會(huì)被 git 忽略

一個(gè)環(huán)境文件只包含環(huán)境變量的“鍵=值”對(duì),并且必須以VUE_APP開(kāi)始:

FOO=bar     //無(wú)效
VUE_APP_SECRET=secret  有效

模式

模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念。默認(rèn)情況下，一個(gè) Vue CLI 項(xiàng)目有三個(gè)模式：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit
  

了解模式以后，我們可以為對(duì)應(yīng)環(huán)境設(shè)置相應(yīng)的環(huán)境變量，比如：

• 為 production 設(shè)置 .env.production
• 為 development 設(shè)置 .env.development
• *為一個(gè)特定模式準(zhǔn)備的環(huán)境文件 (例如 .env.production ) 將會(huì)比一般的環(huán)境文件 (例如 .env ) 擁有更高的優(yōu)先級(jí)

如果只需要在本地使用的話，可以在后面加入.local,比如 .env.local ,會(huì)git 忽略

在客戶端側(cè)代碼中，可以使用 process.env.VUE_APP_* 獲取應(yīng)用

注：process.env.NODE_ENV，獲取應(yīng)用運(yùn)行模式( "development" 、 "production" 或 "test" )

process.env.BASE_URL,應(yīng)用基礎(chǔ)路徑( vue.config.js 中的 publicPath 選項(xiàng))

ps：下面看下淺談vue中環(huán)境變量和模式的作用

使用vue框架進(jìn)行前端開(kāi)發(fā)也有一段時(shí)間了，遇到的問(wèn)題可以大致分為2類：開(kāi)發(fā)問(wèn)題，部署問(wèn)題。

開(kāi)發(fā)方面的問(wèn)題是最多的，也是大家經(jīng)常會(huì)遇到的，但是部署的問(wèn)題也不容小覷，一旦部署出錯(cuò)會(huì)造成嚴(yán)重的上線事故。

開(kāi)發(fā)和測(cè)試時(shí)調(diào)用后臺(tái)接口的地址是和生產(chǎn)環(huán)境中不一樣的，有些時(shí)候需要跳轉(zhuǎn)到其他網(wǎng)頁(yè)，也需要測(cè)試和生產(chǎn)環(huán)境跳轉(zhuǎn)不同的頁(yè)面。

這些配置如果都用人工來(lái)維護(hù)，上測(cè)試環(huán)境注釋掉生產(chǎn)的代碼，上生產(chǎn)環(huán)境注釋掉測(cè)試的代碼，會(huì)很麻煩也很容易出錯(cuò)。

所以有必要在一個(gè)入口進(jìn)行控制，這就要用到vue框架中的環(huán)境變量和模式。

在vue-cli3構(gòu)建的項(xiàng)目中，項(xiàng)目根目錄下創(chuàng)建.env.[模式]文件可以定義一種模式，在這個(gè)文件中定義的變量就是對(duì)應(yīng)模式的環(huán)境變量。

在本地啟動(dòng)項(xiàng)目默認(rèn)是使用的development模式，使用build命令打包默認(rèn)是使用的production模式。但是我們一般都會(huì)有一個(gè)測(cè)試環(huán)境，在我們打測(cè)試包和生產(chǎn)包的時(shí)候都是用的是production模式，所以需要定義一個(gè)環(huán)境變量來(lái)進(jìn)行區(qū)分。

我目前的做法是創(chuàng)建.env.development，.env.test，.env.production三個(gè)模式文件。

每個(gè)模式文件中有3個(gè)環(huán)境變量：NODE_ENV（對(duì)應(yīng)當(dāng)前模式的名稱），VUE_APP_RUNTIME_ENV（對(duì)應(yīng)當(dāng)前環(huán)境的名稱），VUE_APP_BASE_URL（當(dāng)前環(huán)境向后臺(tái)發(fā)請(qǐng)求的baseurl）。

vue-cli3構(gòu)建的項(xiàng)目中默認(rèn)只有development模式和production模式，默認(rèn)的NODE_ENV分別是development和production，很多配置也只依據(jù)NODE_ENV區(qū)分這2種模式，但是我們需要有3種模式。生產(chǎn)和測(cè)試的包應(yīng)該是除了環(huán)江變量不同，其他都相同，所以同屬production模式。用額外的VUE_APP_RUNTIME_ENV來(lái)區(qū)分production和test環(huán)境。

定義完成之后，在項(xiàng)目中使用process.env.VUE_APP_RUNTIME_ENV即可訪問(wèn)到變量的值。

package.json中也需要定義一條打測(cè)試包的命令：

"build-test": "vue-cli-service build --mode test"

表示打一個(gè)使用測(cè)試配置的身生產(chǎn)包。

到此這篇關(guān)于深入淺析vue全局環(huán)境變量和模式的文章就介紹到這了,更多相關(guān)vue全局環(huán)境變量和模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論