1，什么是process.env

process.env 是 Node.js 中的一個環(huán)境對象。其中保存著系統(tǒng)的環(huán)境的變量信息?？墒褂?Node.js 命令行工具直接進行查看。如下：

而 NODE_ENV 就是其中的一個環(huán)境變量。這個變量主要用于標識當前的環(huán)境（生產(chǎn)環(huán)境，開發(fā)環(huán)境）。默認是沒有這個環(huán)境變量的，需要自己手動配置。

2，vue中的NODE_ENV

在 Vue 項目中， Vue 提供了自己的配置方式。這就要涉及到 Vue CLI 中模式的概念了。 Vue CLI 文檔說明了這個問題。

VueCli官方鏈接：

也就是說，在 Vue 中 ,NODE_ENV 可以通過 .env .[mode]文件配置。配置過后，運行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）時，就會將該模式下的NODE_ENV載入其中了。而這些命令，都有自己的默認模式：

• npm run dev(serve) ，其實是運行了 vue-cli service serve ，默認模式為 development ?？梢栽?.env.development 文件下修改該模式的 NODE_ENV
• npm run build ，其實運行了 vue-cli service build ，默認模式為 production ?？梢栽?env.production 文件下修改該模式的 NODE_ENV ；不推薦修改；
• 在開發(fā)階段 process.env.NODE_ENV 默認是 development
• 當運行npm run build 打包后 process.env.NODE_ENV 狀態(tài)就自動改為了production

3，環(huán)境變量

在日常開發(fā)中我們可能分為測試環(huán)境開發(fā)環(huán)境和生產(chǎn)環(huán)境，但是這兩個環(huán)境所請求的后端接口是不一樣的，或者生產(chǎn)環(huán)境下關(guān)閉Vconsole等這些跨環(huán)境的需求；
此時我們可以新建 .env.development 和 .env.production這些文件來新增一些配置，作為重要的依賴項，

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

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

一個環(huán)境文件只包含環(huán)境變量的“鍵=值”對：

FOO='bar'
VUE_APP_BASE_API='https://bdgw.cci.cn/common'

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。你可以在應(yīng)用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_BASE_API)

1，新建文件

可以看到下圖我新建了三個文件：.env.development和.env.production和.env.test;

可以看出我在測試環(huán)境和生產(chǎn)環(huán)境新建了一個 process.env.VUE_APP_BASE_API 這個屬性來表示測試環(huán)境和生產(chǎn)環(huán)境請求不同的后端接口ip；我只需要運行不同的打包命令即可；

2，使用：

package.json里面新的運行命名后面要新增 --mode '自定義的名字'；我這里為什么沒有使用–mode development 或 production呢？
因為上面講到vue默認開發(fā)環(huán)境就是development ，生產(chǎn)環(huán)境就是production ；所以不需要多此一舉了；

看到我上面紅框里面的變量是 --mode test 說明當我運行 npm run build-test 時，.env.test 文件里面配置的一些環(huán)境變量就已經(jīng)加載進來的，可以在代碼中做一些相應(yīng)的判斷；文章來源地址http://www.zghlxwxcb.cn/news/detail-625055.html

到了這里，關(guān)于vue - vue中的process.env.NODE_ENV和環(huán)境變量的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！