Vue中怎么配置使用process.env

這篇文章主要講解了“Vue中怎么配置使用process.env”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue中怎么配置使用process.env”吧！

vue process.env

process.env 為何物

process是 nodejs 下的一個(gè)全局變量，它存儲(chǔ)著 nodejs 中進(jìn)程有關(guān)的信息。

言歸正傳。 process.env 是 Node.js 中的一個(gè)環(huán)境對(duì)象。其中保存著系統(tǒng)的環(huán)境的變量信息。可使用 Node.js 命令行工具直接進(jìn)行查看。

而 NODE_ENV 就是其中的一個(gè)環(huán)境變量。這個(gè)變量主要用于標(biāo)識(shí)當(dāng)前的環(huán)境（生產(chǎn)環(huán)境，開(kāi)發(fā)環(huán)境）。默認(rèn)是沒(méi)有這個(gè)環(huán)境變量的，需要自己手動(dòng)配置。不同系統(tǒng)有不同的環(huán)境變量配置方式，在這里就不多加贅述。

NODE_ENV 與 Vue

NODE_ENV 變量只能在系統(tǒng)中配置嗎？其實(shí)不然。在 Vue 項(xiàng)目中， Vue 提供了自己的配置方式。這就要涉及到 Vue CLI 中模式的概念了。 Vue CLI 文檔說(shuō)明了這個(gè)問(wèn)題。

也就是說(shuō)，在 Vue 中， NODE_ENV 可以通過(guò) .env 文件或者 .env.[mode] 文件配置。配置過(guò)后，運(yùn)行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）時(shí)，就會(huì)將該模式下的NODE_ENV載入其中了。而這些命令，都有自己的默認(rèn)模式：

• npm run dev(serve) ，其實(shí)是運(yùn)行了 vue-cli service serve ，默認(rèn)模式為 development ?？梢栽?.env.development 文件下修改該模式的 NODE_ENV 。

• npm run build ，其實(shí)運(yùn)行了 vue-cli service build ，默認(rèn)模式為 production 。

可以在 .env.production 文件下修改該模式的 NODE_ENV 。
修改方式如下，以鍵值對(duì)的方式：

除了以上的修改方式外，也可以在命令后直接使用 --mode 參數(shù)手動(dòng)指定模式。當(dāng)然，每個(gè)模式配置的變量也不只有 NODE_ENV , 也可以通過(guò)配置其他的變量簡(jiǎn)化工作流程。

模式的應(yīng)用

有了模式的概念，就可以根據(jù)不同的環(huán)境配置模式，就不用每次打包時(shí)都去更改 vue.config.js 文件了。比如在測(cè)試環(huán)境和生產(chǎn)環(huán)境， publicPath參數(shù) （部署應(yīng)用包時(shí)的基本 URL） 可能不同。遇到這種情況就可以在 vue.config.js 文件中，將 publicPath 參數(shù)設(shè)置為：
publicPath: process.env.BASE_URL
設(shè)置之后，再在各個(gè) .env.[mode] 文件下對(duì) BASE_URL 進(jìn)行配置就行了，這樣就避免了每次修改配置文件的尷尬。其他的配置也是同理。
Tips: 即使不是生產(chǎn)環(huán)境，也可以將模式設(shè)置為 production ，這樣可以獲得 webpack 默認(rèn)的打包優(yōu)化。

補(bǔ)充：vue中的process.env使用

1、在nodejs中使用

1、安裝

npm install dotenv

2、根目錄下創(chuàng)建 .env 文件

HOST = localhost
PORT = 8080

3、入口文件中引入 dotenv 并使用

require("dotenv").config({path: '.env'})
console.log(process.env.HOST); // localhost
console.log(process.env.PORT); // 8080

2、在vue中使用

在使用腳手架創(chuàng)建項(xiàng)目的時(shí)候，會(huì)自動(dòng)安裝dotenv，可以從package-lock.json中找到配置

在main.js入口文件中打印

console.log(process.env);

可以看出，默認(rèn)的模式是development即開(kāi)發(fā)模式。

模式

也就是說(shuō)，在Vue中， NODE_ENV 可以通過(guò) .env 文件或者.env.[mode]文件配置。配置過(guò)后，運(yùn)行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）時(shí)，就會(huì)將該模式下的NODE_ENV載入其中了。而這些命令，都有自己的默認(rèn)模式：

• npm run dev(serve) ，其實(shí)是運(yùn)行了 vue-cli service serve ，默認(rèn)模式為 development ?？梢栽?.env.development 文件下修改該模式的 NODE_ENV 。

• npm run build ，其實(shí)運(yùn)行了 vue-cli service build ，默認(rèn)模式為 production ?？梢栽?code> .env.production 文件下修改該模式的 NODE_ENV 。

在根目錄下創(chuàng)建文件

NODE_ENV = production

注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 開(kāi)頭的變量將通過(guò) webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。這是為了避免意外公開(kāi)機(jī)器上可能具有相同名稱的私鑰。

NODE_ENV = development
VUE_APP_BASE_API = 'http://localhost:8099/'

再打印 process.env的信息如下：

注意：.env 環(huán)境文件是通過(guò)運(yùn)行 vue-cli-service 命令載入的，因此環(huán)境文件發(fā)生變化，你需要重啟服務(wù)。

除了以上的修改方式外，也可以在命令后直接使用--mode參數(shù)手動(dòng)指定模式。

感謝各位的閱讀，以上就是“Vue中怎么配置使用process.env”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue中怎么配置使用process.env這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！