VueCLI 通過process.env配置環境變數

前言

• 我們在做vue或者react單頁應用的時候,會發現配置檔案裡有procsss.env欄位
• 依靠環境變數,標記伺服器,這樣就可以根據不同的環境,配置不同環境下我們所需要的東西。
  例如：後端介面的域名。

理解node環境變數process.env

首先,我們需要理解node中的process和process.env是什麼,點選此處進入Node.js中文網進行檢視
在資料夾中新建process.js檔案,進行操作,理解process.env

process（程序）

• process物件是一個全域性變數，提供了有關當前 Node.js 程序的資訊並對其進行控制。 作為全域性變數，它始終可供 Node.js 應用程式使用，無需使用 require()。
  它也可以使用 require() 顯式地訪問const process = require('process')

在process.js檔案中console.log(process),並在終端中執行node process.js可以打印出如下資訊

資訊過於繁瑣,就不在此處全部展示，讀者可以自行獲取該資料。
如上就可以看到 process是node的全域性變數，並且process有env這個屬性。

process.env(環境變數)

在process.js檔案中console.log(process.env)

• process.env屬性會返回包含使用者環境的物件。通俗來講，該屬性可以返回專案執行環境的資訊。

此物件的示例如下所示：

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

1. 可以修改此物件，但這些修改不會反映到 Node.js 程序之外，或者（除非明確地要求）反映到其他 Worker 執行緒。 換句話說，以下示例不會起作用：

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

以下示例則會起作用：

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

2. 在 process.env 上為屬性賦值會隱式地將值轉換為字串。 不推薦使用此行為。 當值不是字串、數字或布林值時，Node.js 未來的版本可能會丟擲錯誤。

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

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

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

4. 在 Windows 作業系統上，環境變數不區分大小寫。

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

5. 除非在建立 Worker 例項時顯式地指定，否則每個Worker 執行緒都有自己的 process.env 副本（基於其父執行緒的 process.env，或者指定為 Worker 建構函式的 env 選項的任何內容）。 對於 process.env 的更改在 Worker 執行緒中是不可見的，並且只有主執行緒可以做出對作業系統或原生外掛可見的更改。

VueCLI中環境變數和模式

點選進入Vue CLI 官方文件中進行檢視

模式是 Vue CLI 專案中一個重要的概念。預設情況下，一個 Vue CLI 專案有三個模式：

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 選項引數為命令列覆寫預設的模式

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

不同的模式會有不同的環境變數NODE_ENV

在 development 模式下 NODE_ENV 的值會被設定為 "development"
在 development 模式下 NODE_ENV 的值會被設定為 "production"

在根目錄下新建下列檔案可以設定環境變數

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

你可以通過為 .env 檔案增加字尾來設定某個模式下特有的環境變數。
比如，如果你在專案根目錄建立一個名為 .env.development 的檔案，
那麼在這個檔案裡宣告過的變數就只會在 development 模式下被載入。

環境載入屬性 特定環境檔案高於一般環境檔案的優先順序

為一個特定模式準備的環境檔案 (例如 .env.production) 將會比一般的環境檔案 (例如 .env) 擁有更高的優先順序。
此外，Vue CLI 啟動時已經存在的環境變數擁有最高優先順序，並不會被 .env 檔案覆寫。

環境檔案 內容書寫 一個環境檔案只包含環境變數的“鍵=值”對：

FOO=bar
VUE_APP_SECRET=secret

環境檔案 配置變數

只有以VUE_APP_開頭的變數會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的程式碼中這樣訪問它們：

console.log(process.env.VUE_APP_SECRET)

因此我們新增變數的時候都以VUE_APP_*這樣的形式

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

除此之外,還有兩個特殊的變數
NODE_ENV- 會是"development"、"production" 或 "test"中的一個。具體的值取決於應用執行的模式。可以自行修改

NODE_ENV="可以進行修改"  

BASE_URL- 會和vue.config.js中的publicPath選項相符，即你的應用會部署到的基礎路徑。

實戰

vue cli 新建專案 建立.env.env.development.env.production檔案

配置環境變數

.env

VUE_APP_BASE_URL = '.env 下的介面地址'

• 1

.env.development

VUE_APP_BASE_URL = '.env.development 下的介面地址'

• 1

.env.production

VUE_APP_BASE_URL = '.env.production 下的介面地址'

• 1

在App.vue檔案中檢視環境變數

console.log(process.env)
console.log('介面地址',process.env.VUE_APP_BASE_URL)

開發環境

npm run serve

.env 環境變數被覆蓋 當前獲取到的是.env.development開發環境介面地址

生產環境

npm run build打包之後,在本地伺服器上執行

.env 環境變數被覆蓋 當前獲取到的是.env.production開發環境介面地址

開啟本地伺服器

1. 安裝http-server

npm install install -g http-server

npm有時候很慢，可換cnpm（安裝）較快，或者npm配置為淘寶映象

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

2. 開啟http-server本地服務

#在專案根目錄下執行如下命令，且前提你已經進行npm run build打包dist檔案
http-server ./dist