環(huán)境變量

? 我們在使用 Vue-cli 創(chuàng)建的Vue項目中，可以在構建和運行時為項目設置環(huán)境變量，這些環(huán)境變量會根據環(huán)境（模式）的不同，而自動注入到項目中，也就是說我們可以根據環(huán)境不同，設置不同的環(huán)境變量或者給同個環(huán)境變量賦予不同的值，從而實現(xiàn)不同的效果。

但是請不要在環(huán)境變量中存儲任何機密敏感信息（秘鑰等），因為環(huán)境變量會隨著構建打包嵌入到輸出的代碼中，這意味著任何人都有可能看到這些變量的值，從而造成信息泄露。

1.環(huán)境變量只能放置在項目根目錄

下的特定.env環(huán)境文件中：

.env          // 通用文件，在所有環(huán)境中都會被注入到項目中
.env.local    // 本地通用文件，只有在本地運行的所有環(huán)境中都會被注入到項目中，但是會被git忽略，不能提交到git倉庫中
.env.[mode]   // 模式專用文件，只有在指定的mode模式下，才會注入到項目中 
.env.[mode].local // 本地模式專用文件，只有在本地運行的指定的mode模式下，才會注入到項目中，且會被git忽略，不能提交到git倉庫中

// 例如
.env.development   // development模式專用文件，只有在development模式下，才會注入到項目中 
.env.development.local  // 本地development模式專用文件

如果項目中同時聲明了多個個不同類型環(huán)境文件，并且這些文件中存在同名的環(huán)境變量時，會根據 .env.[mode].local > .env.[mode] > .env.local > .env 的優(yōu)先級先后順序決定環(huán)境變量的值，最終環(huán)境變量的值會取優(yōu)先級最高的環(huán)境文件中的那個值。

// 多個環(huán)境文件
// .env
VUE_APP_AAA=aaa
// 如果只有上面的文件 則最終變量值為 aaa

// .env.local
VUE_APP_AAA=bbb
// 如果只有上面的兩個文件 則最終變量值為 bbb

// .env.development
VUE_APP_AAA=ccc
// 如果只有上面的三個文件 則最終變量值為 ccc

// .env.development.loacal
VUE_APP_AAA=ddd
// 如果只有上面的四個文件 則最終變量值為 ddd

由于環(huán)境文件是在運行vue-cli-service 運行命令時載入的，因此當我們修改了環(huán)境文件時，必須重新啟動項目才能生效。

2.環(huán)境變量以鍵值對的形式在環(huán)境文件中聲明

目前只有NODE_ENV、BASE_URL兩個特殊變量和以VUE_APP_開頭聲明的自由變量，能夠通過webpack.DefinePlugin注入到項目中：

VUE_APP_VAR=123abc
BASE_URL=./abc（不推薦修改該變量）
NODE_ENV=test （不推薦修改該變量）

兩個特殊變量NODE_ENV和BASE_URL都擁有自己的默認屬性值，因此不建議在環(huán)境文件中聲明同名變量：

• NODE_ENV： 值為"development"、"production" 或 "test" 三者之一，具體的值取決于項目運行的模式。
• BASE_URL：值為vue.config.js中的publicPath選項的值，即項目在部署時的基礎路徑。

3.環(huán)境變量在項目中

需要通過process.env.變量名的形式來訪問

如果我們想在項目的頁面中使用環(huán)境變量，那么我們需要通過process.env.變量名的方式來訪問對應值：

console.log(process.env.VUE_APP_VAR) // 123abc
console.log(process.env.BASE_URL) // ./abc
console.log(process.env.NODE_ENV) // test

除了在普通頁面中使用環(huán)境變量之外，我們也可以在項目的public/index.html中以HTML插值（lodash template語法）的方式來使用環(huán)境變量：

? ① <%= 變量名 %>：用來做不轉義插值，如果插入的環(huán)境變量中，包含HTML標簽，則會被瀏覽器解析，類似于設置innerHTML。

? ② <%- 變量名 %>：用來做HTML轉義插值，如果插入的環(huán)境變量中，包含HTML標簽，不會被瀏覽器解析，只是作為字符串插入到頁面上，類似于設置innerText。

? ③ <% if(變量名) %>：用來做JavaScript流程控制。

// .env 

// 聲明一個帶有HTML標簽的環(huán)境變量
VUE_APP_HTML=<h3>h3標題</h3>

<!-- index.html -->

<!-- 在元素屬性中使用 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<!-- 在JS中使用 -->
<script>
  console.log('process.env.NODE_ENV----<%= NODE_ENV %>');
</script>
<!-- 轉義插值 -->
<div><%- VUE_APP_HTML %></div>
<!-- 不轉義插值 -->
<div> <%= VUE_APP_HTML %> </div>
<!-- 進行JS流程控制 -->
<% if(NODE_ENV==='development' ) { %>
		<div>開發(fā)</div>
<% } %>
<% if(NODE_ENV==='test' ) { %>
		<div>測試</div>
<% } %>
<% if(NODE_ENV==='production' ) { %>
	<div>生產</div>
<% } %>

頁面效果：

模式

默認情況下，一個通過Vue Cli 創(chuàng)建的Vue項目，擁有三種模式：development、test、production，這三種模式分別默認對應了不同的項目執(zhí)行命令，從而創(chuàng)建不同的webpack 配置：

① development

該模式為開發(fā)模式，默認對應vue-cli-service serve命令，也是默認的啟動項目運行命令，該模式將會創(chuàng)建一個用于開發(fā)時快速構件的webpack配置，啟用代碼熱更新、不會對代碼進行優(yōu)化和壓縮、打包速度快但生成的代碼體積較大。

② test

該模式為測試模式，默認對應vue-cli-service test:unit命令，該模式將會創(chuàng)建一個優(yōu)化過后的，用于單元測試的 webpack 配置，它并不會處理圖片以及一些對單元測試非必需的其他資源，只會去執(zhí)行所有的測試用例，并在測試完成后自動關閉。

③ production

該模式為生產模式，默認對應vue-cli-service build和vue-cli-service test:e2e命令，該模式將會創(chuàng)建一個用于部署的webpack配置，對項目進行性能優(yōu)化，對代碼進行優(yōu)化和壓縮，并打包生成用于在生產環(huán)境部署的文件，打包速度會比較慢，但是生成的代碼文件體積較小，加載速度較快。

除了根據執(zhí)行的命令，運行對應的默認項目模式之外，我們還可以通過在執(zhí)行命令時，在命令后面加上--mode 模式，覆蓋默認的模式，顯式的指明要運行的項目模式。

這三種模式除了會決定webpack配置之外，還會創(chuàng)建一個名為NODE_ENV的環(huán)境變量，該環(huán)境變量的值為當前的項目模式：development、test、production。

如果我們在對應的環(huán)境文件中提前聲明了環(huán)境變量NODE_ENV（最好不要！），那么我們需在在執(zhí)行vue-cli-service ***命令之前移除掉這個環(huán)境變量，或者在執(zhí)行命令時，顯式的指明要運行的項目模式。

否則該環(huán)境變量的值，會干擾項目的運行模式。

// package.json（待補充）
 "scripts": {
    "serve": "vue-cli-service serve", // 默認為 development 模式
    "build": "vue-cli-service build", // 默認為 production 模式
    "test": "vue-cli-service test:unit", // 默認為 test 模式
    "serve2": "vue-cli-service serve --mode production", // 顯式的指定運行 production 模式
   	"build2": "vue-cli-service build --mode test", // 顯式的指定運行 test 模式
    "test2": "vue-cli-service test:unit --mode development", // 顯式的指定運行 development 模式
  },

在頁面中獲取項目的運行模式：

// process.env.NODE_ENV 即可獲取運行模式
mounted() {
    console.log(process.env.NODE_ENV);
},

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論