前言

• 我們在做vue或者react單頁應(yīng)用的時(shí)候,會發(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 對象是一個全局變量，提供了有關(guān)當(dāng)前 Node.js 進(jìn)程的信息并對其進(jìn)行控制。 作為全局變量，它始終可供 Node.js 應(yīng)用程序使用，無需使用 require()。它也可以使用 require() 顯式地訪問const process = require('process')

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

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

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

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

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

此對象的示例如下所示：

{
  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'
}

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

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

以下示例則會起作用：

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

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

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ū)分大小寫。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

FOO=bar
VUE_APP_SECRET=secret

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

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

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/'

除此之外,還有兩個特殊的變量

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

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

BASE_URL - 會和 vue.config.js中的publicPath選項(xiàng)相符，即你的應(yīng)用會部署到的基礎(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)

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

npm run serve

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

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

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

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

打開本地服務(wù)器

安裝http-server

npm install install -g http-server

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

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

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

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

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

最新評論