環(huán)境變量

? 我們?cè)谑褂?Vue-cli 創(chuàng)建的Vue項(xiàng)目中，可以在構(gòu)建和運(yùn)行時(shí)為項(xiàng)目設(shè)置環(huán)境變量，這些環(huán)境變量會(huì)根據(jù)環(huán)境（模式）的不同，而自動(dòng)注入到項(xiàng)目中，也就是說(shuō)我們可以根據(jù)環(huán)境不同，設(shè)置不同的環(huán)境變量或者給同個(gè)環(huán)境變量賦予不同的值，從而實(shí)現(xiàn)不同的效果。

但是請(qǐng)不要在環(huán)境變量中存儲(chǔ)任何機(jī)密敏感信息（秘鑰等），因?yàn)榄h(huán)境變量會(huì)隨著構(gòu)建打包嵌入到輸出的代碼中，這意味著任何人都有可能看到這些變量的值，從而造成信息泄露。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• NODE_ENV： 值為"development"、"production" 或 "test" 三者之一，具體的值取決于項(xiàng)目運(yùn)行的模式。
• BASE_URL：值為vue.config.js中的publicPath選項(xiàng)的值，即項(xiàng)目在部署時(shí)的基礎(chǔ)路徑。

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

需要通過(guò)process.env.變量名的形式來(lái)訪問(wèn)

如果我們想在項(xiàng)目的頁(yè)面中使用環(huán)境變量，那么我們需要通過(guò)process.env.變量名的方式來(lái)訪問(wèn)對(duì)應(yīng)值：

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

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

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

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

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

// .env 

// 聲明一個(gè)帶有HTML標(biāo)簽的環(huán)境變量
VUE_APP_HTML=<h3>h3標(biāo)題</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>
<!-- 轉(zhuǎn)義插值 -->
<div><%- VUE_APP_HTML %></div>
<!-- 不轉(zhuǎn)義插值 -->
<div> <%= VUE_APP_HTML %> </div>
<!-- 進(jìn)行JS流程控制 -->
<% if(NODE_ENV==='development' ) { %>
		<div>開發(fā)</div>
<% } %>
<% if(NODE_ENV==='test' ) { %>
		<div>測(cè)試</div>
<% } %>
<% if(NODE_ENV==='production' ) { %>
	<div>生產(chǎn)</div>
<% } %>

頁(yè)面效果：

模式

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

① development

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

② test

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

③ production

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

除了根據(jù)執(zhí)行的命令，運(yùn)行對(duì)應(yīng)的默認(rèn)項(xiàng)目模式之外，我們還可以通過(guò)在執(zhí)行命令時(shí)，在命令后面加上--mode 模式，覆蓋默認(rèn)的模式，顯式的指明要運(yùn)行的項(xiàng)目模式。

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

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

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

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

在頁(yè)面中獲取項(xiàng)目的運(yùn)行模式：

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論