vue-cli3.0移除了配置文件目錄： config和build文件夾?？梢哉f(shuō)是非常的精簡(jiǎn)了，那移除了配置文件目錄后如何自定義配置環(huán)境變量和模式呢?

為什么需要配置環(huán)境變量和模式呢？

所有方法肯定是來(lái)源于現(xiàn)實(shí)的需求。在一個(gè)產(chǎn)品的前端開(kāi)發(fā)過(guò)程中，一般來(lái)說(shuō)會(huì)經(jīng)歷本地開(kāi)發(fā)、測(cè)試腳本、開(kāi)發(fā)自測(cè)、測(cè)試環(huán)境、預(yù)上線環(huán)境，然后才能正式的發(fā)布。對(duì)應(yīng)每一個(gè)環(huán)境可能都會(huì)有所差異，比如說(shuō)服務(wù)器地址、接口地址、websorket地址…… 等等。在各個(gè)環(huán)境切換的時(shí)候，就需要不同的配置參數(shù)，所以就可以用環(huán)境變量和模式，來(lái)方便我們管理。

環(huán)境變量

cli-3.0總共提供了四種方式來(lái)制定環(huán)境變量：

1.在根目錄添加.env文件，配置所有情況下都會(huì)用到的配置（不知道這個(gè)存在的意義，所有的都需要的也就不需要配置了吧）。

2.在根目錄添加.env.local 文件，配置所有情況下都會(huì)用到的配置，與.env的區(qū)別是只會(huì)在本地，該文件不會(huì)被git跟蹤。

3.在根目錄添加.env.[mode] 文件，配置對(duì)應(yīng)某個(gè)模式下的配置,比如：.env.development來(lái)配置開(kāi)發(fā)環(huán)境的配置。

4.在根目錄添加.env.[mode].local文件，配置對(duì)應(yīng)某個(gè)模式下的配置,與.env.[mode]的區(qū)別也只是會(huì)在本地生效，該文件不會(huì)被git跟蹤。

在文件中，我們只需要以key=value的方式就可以設(shè)置變量了。

例如：

FOO=bar
VUE_APP_SECRET=secret

環(huán)境變量的使用

設(shè)置完環(huán)境變量之后就可以在我們的項(xiàng)目中使用這兩個(gè)變量了。不過(guò)還需要注意的是在項(xiàng)目的不同地方使用，限制也不一樣。

1.在項(xiàng)目中，也就是src中使用環(huán)境變量的話，必須以VUE_APP_開(kāi)頭。例如我們可以在main.js中直接輸出：console.log(process.env.VUE_APP_SECRET)

2.在webpack配置中使用，沒(méi)什么限制，可以直接通過(guò)process.env.XXX來(lái)使用

3.在public/index.html中使用的：分三類：（沒(méi)怎么用過(guò)）

 <%= VAR %> 用于非轉(zhuǎn)換插值 例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >`
 <%- VAR %> 用于HTML轉(zhuǎn)義插值
 <% expression %> 用于JavaScript控制流 

模式

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

1.development：在vue-cli-service serve下，即開(kāi)發(fā)環(huán)境使用

2.production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式環(huán)境使用

3.test： 在vue-cli-service test:unit下使用

另外，如果你想要修改模式下默認(rèn)的環(huán)境變量的話可以通過(guò)--mode來(lái)實(shí)現(xiàn)，例如：

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

有環(huán)境變量就能完成我們的需求了，為什么需要有模式的存在，這里我沒(méi)查到詳細(xì)的文檔，個(gè)人認(rèn)為模式是為了提供給第三方的插件一個(gè)辨識(shí)。例如vuex可以根據(jù)模式的不同，在development自動(dòng)注入devtoolPlugin插件，利于開(kāi)發(fā)，而在production中檢測(cè)到錯(cuò)誤不會(huì)進(jìn)行console。

舉例

說(shuō)完了概念，可能還是比較模糊，可以試著添加一個(gè)stage環(huán)境，用來(lái)模擬預(yù)上線。

首先在package.json添加一種類型，并修改默認(rèn)環(huán)境變量為stage環(huán)境變量

在根目錄下創(chuàng)建.env.stage文件，來(lái)聲明變量：

這里聲明的NODE_ENV = ‘production'用來(lái)表示這是生產(chǎn)環(huán)境。VUE_APP_CURRENTMODE為項(xiàng)目變量，outputDir為除數(shù)打包后文件的地址。
在vue.config.js中使用環(huán)境變量，制定輸出文件為環(huán)境變量配置的文件：

最后執(zhí)行命令yarn stage能看到根目錄下生成了stage文件：

這樣我們就配置完了stage環(huán)境。詳細(xì)的項(xiàng)目地址可以參考：以vue-cli3.0為基礎(chǔ)，結(jié)合vue-router、vuex、axios、iview組件庫(kù)搭建一個(gè)工程化前端demo

參考文檔：Environment Variables and Modes

總結(jié)

以上所述是小編給大家介紹的vue-cli3.0 環(huán)境變量與模式配置方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論