前言

• 我們?cè)谧鰒ue或者react單頁(yè)應(yīng)用的時(shí)候,會(huì)發(fā)現(xiàn)配置文件里有procsss.env字段
• 依靠環(huán)境變量,標(biāo)記服務(wù)器,這樣就可以根據(jù)不同的環(huán)境,配置不同環(huán)境下我們所需要的東西。

例如：后端接口的域名。

理解node環(huán)境變量process.env

首先,我們需要理解node中的process和process.env是什么,點(diǎn)擊此處進(jìn)入Node.js中文網(wǎng)進(jìn)行查看

在文件夾中新建process.js文件,進(jìn)行操作,理解process.env

process（進(jìn)程）

process 對(duì)象是一個(gè)全局變量，提供了有關(guān)當(dāng)前 Node.js 進(jìn)程的信息并對(duì)其進(jìn)行控制。 作為全局變量，它始終可供 Node.js 應(yīng)用程序使用，無(wú)需使用 require()。它也可以使用 require() 顯式地訪問(wèn)const process = require('process')

在process.js文件中console.log(process),并在終端中執(zhí)行node process.js可以打印出如下信息

信息過(guò)于繁瑣,就不在此處全部展示，讀者可以自行獲取該數(shù)據(jù)。如上就可以看到 process是node的全局變量，并且process有env這個(gè)屬性。

process.env(環(huán)境變量)

在process.js文件中console.log(process.env)

process.env屬性會(huì)返回包含用戶環(huán)境的對(duì)象。通俗來(lái)講，該屬性可以返回項(xiàng)目運(yùn)行環(huán)境的信息。

此對(duì)象的示例如下所示：

{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'nodejscn',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/nodejscn',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/nodejscn',
  LOGNAME: 'nodejscn',
  _: '/usr/local/bin/node'
}

可以修改此對(duì)象，但這些修改不會(huì)反映到 Node.js 進(jìn)程之外，或者（除非明確地要求）反映到其他 Worker 線程。 換句話說(shuō)，以下示例不會(huì)起作用：

$ node -e 'process.env.foo = "bar"' && echo $foo

以下示例則會(huì)起作用：

process.env.foo = 'bar';
console.log(process.env.foo);

在 process.env 上為屬性賦值會(huì)隱式地將值轉(zhuǎn)換為字符串。 不推薦使用此行為。 當(dāng)值不是字符串、數(shù)字或布爾值時(shí)，Node.js 未來(lái)的版本可能會(huì)拋出錯(cuò)誤。

process.env.test = null;
console.log(process.env.test);
// => 'null'
process.env.test = undefined;
console.log(process.env.test);
// => 'undefined'

使用delete 可以從 process.env 中刪除屬性。

process.env.TEST = 1;
delete process.env.TEST;
console.log(process.env.TEST);
// => undefined

在 Windows 操作系統(tǒng)上，環(huán)境變量不區(qū)分大小寫(xiě)。

process.env.TEST = 1;
console.log(process.env.test);
// => 1

除非在創(chuàng)建 Worker 實(shí)例時(shí)顯式地指定，否則每個(gè) Worker 線程都有自己的 process.env 副本（基于其父線程的 process.env，或者指定為 Worker 構(gòu)造函數(shù)的 env 選項(xiàng)的任何內(nèi)容）。 對(duì)于 process.env 的更改在 Worker 線程中是不可見(jiàn)的，并且只有主線程可以做出對(duì)操作系統(tǒng)或原生插件可見(jiàn)的更改。

VueCLI中環(huán)境變量和模式

點(diǎn)擊進(jìn)入Vue CLI 官方文檔中進(jìn)行查看

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

1. development 模式用于 vue-cli-service serve
2. production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
3. test 模式用于 vue-cli-service test:unit

你可以通過(guò)傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫(xiě)默認(rèn)的模式

"dev-build": "vue-cli-service build --mode development",

不同的模式會(huì)有不同的環(huán)境變量NODE_ENV

在 development 模式下 NODE_ENV 的值會(huì)被設(shè)置為 "development"
在 development 模式下 NODE_ENV 的值會(huì)被設(shè)置為 "production"

在根目錄下新建下列文件可以設(shè)置環(huán)境變量

.env                # 在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會(huì)被 git 忽略
你可以通過(guò)為 .env 文件增加后綴來(lái)設(shè)置某個(gè)模式下特有的環(huán)境變量。
比如，如果你在項(xiàng)目根目錄創(chuàng)建一個(gè)名為 .env.development 的文件，
那么在這個(gè)文件里聲明過(guò)的變量就只會(huì)在 development 模式下被載入。

環(huán)境加載屬性 特定環(huán)境文件高于一般環(huán)境文件的優(yōu)先級(jí)

為一個(gè)特定模式準(zhǔn)備的環(huán)境文件 (例如 .env.production) 將會(huì)比一般的環(huán)境文件 (例如 .env) 擁有更高的優(yōu)先級(jí)。
此外，Vue CLI 啟動(dòng)時(shí)已經(jīng)存在的環(huán)境變量擁有最高優(yōu)先級(jí)，并不會(huì)被 .env 文件覆寫(xiě)。

環(huán)境文件 內(nèi)容書(shū)寫(xiě) 一個(gè)環(huán)境文件只包含環(huán)境變量的“鍵=值”對(duì)：

FOO=bar
VUE_APP_SECRET=secret

環(huán)境文件 配置變量

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

console.log(process.env.VUE_APP_SECRET)

因此我們添加變量的時(shí)候都以VUE_APP_*這樣的形式

VUE_APP_BASE_URL = 'http://xxx.com/web/'
VUE_APP_WSR_URL = 'ws://xxx.com/web/'

除此之外,還有兩個(gè)特殊的變量

NODE_ENV - 會(huì)是 "development"、"production" 或 "test"中的一個(gè)。具體的值取決于應(yīng)用運(yùn)行的模式。可以自行修改

NODE_ENV="可以進(jìn)行修改"  

BASE_URL - 會(huì)和 vue.config.js中的publicPath選項(xiàng)相符，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。

實(shí)戰(zhàn)

vue cli 新建項(xiàng)目

創(chuàng)建 .env .env.development .env.production 文件

配置環(huán)境變量

.env

VUE_APP_BASE_URL = '.env 下的接口地址'

.env.development

VUE_APP_BASE_URL = '.env.development 下的接口地址'

.env.production

VUE_APP_BASE_URL = '.env.production 下的接口地址'

在App.vue文件中查看環(huán)境變量

console.log(process.env)
console.log('接口地址',process.env.VUE_APP_BASE_URL)

開(kāi)發(fā)環(huán)境

npm run serve

.env 環(huán)境變量被覆蓋 當(dāng)前獲取到的是.env.development開(kāi)發(fā)環(huán)境接口地址

生產(chǎn)環(huán)境

npm run build打包之后,在本地服務(wù)器上運(yùn)行

.env 環(huán)境變量被覆蓋 當(dāng)前獲取到的是.env.production開(kāi)發(fā)環(huán)境接口地址

打開(kāi)本地服務(wù)器

安裝http-server

npm install install -g http-server

npm有時(shí)候很慢，可換cnpm（安裝）較快，或者npm配置為淘寶鏡像

# 配置npm的registry地址
npm config set registry https://registry.npm.taobao.org

開(kāi)啟http-server本地服務(wù)

#在項(xiàng)目根目錄下運(yùn)行如下命令，且前提你已經(jīng)進(jìn)行npm run build打包dist文件
http-server ./dist

 到此這篇關(guān)于VueCLI通過(guò)process.env配置環(huán)境變量的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)VueCLI process.env配置環(huán)境變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論