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' }- 可以
修改此對象，但這些修改不會反映到 Node.js 進程之外，或者（除非明確地要求）反映到其他 Worker 線程。 換句話說，以下示例不會起作用：
$ node -e 'process.env.foo = "bar"' && echo $foo以下示例則會起作用：
process.env.foo = 'bar'; console.log(process.env.foo);
在 process.env 上為屬性賦值會隱式地將值轉換為字符串。 不推薦使用此行為。 當值不是字符串、數字或布爾值時，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 操作系統上，
環境變量不區分大小寫。
process.env.TEST = 1; console.log(process.env.test); // => 1
- 除非在創建 Worker 實例時顯式地指定，否則每個 Worker 線程都有自己的 process.env 副本（基於其父線程的 process.env，或者指定為 Worker 構造函數的 env 選項的任何內容）。 對於 process.env 的更改在 Worker 線程中是不可見的，並且只有主線程可以做出對操作系統或原生插件可見的更改。
VueCLI中環境變量和模式
模式是 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開發環境接口地址
打開本地服務器
- 安裝http-server
npm install install -g http-server
npm有時候很慢，可換cnpm（安裝）較快，或者npm配置為淘寶鏡像
# 配置npm的registry地址 npm config set registry https://registry.npm.taobao.org
- 開啟http-server本地服務
#在項目根目錄下運行如下命令，且前提你已經進行npm run build打包dist文件 http-server ./dist
