如何配置vue-cli環(huán)境變量

本篇文章為大家展示了如何配置vue-cli環(huán)境變量，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

首先可以安裝cross-env

npm install cross-env --save-dev

vue-cli的配置本質(zhì)就是webpack的配置,當(dāng)我們運(yùn)行npm run dev 的時(shí)候,其實(shí)執(zhí)行的是package.json中的scripts 的dev中 ,即build/dev-server.js 這里面一系列的配置啟動(dòng)整個(gè)服務(wù).

我們只想加一個(gè)環(huán)境變量,可以復(fù)制一份,在dev下加一個(gè)devtest命令:

"devtest": "cross-env TESTING=true node build/dev-server.js",

這樣我們就可以通過npm run devtest也能啟動(dòng)整個(gè)服務(wù)了,注意上面的命令,我們加了一個(gè)TESTING=true ,這個(gè)就是加入的環(huán)境變量,TESTING:true, 通過上面的devtest的配置,我們可以運(yùn)行npm run devtest像nppm run dev那樣運(yùn)行起來整個(gè)程序,不過我們發(fā)現(xiàn),此時(shí)在項(xiàng)目中我們獲取不到process.env.TESTING這個(gè)變量,這是為什么呢,如果是直接用webpack是可以的,經(jīng)過查看,是在vue-cli的一系列配置文件中,已經(jīng)寫死了這些,不過我們可以改動(dòng)加上

在根目錄 config下,有dev.env.js和prod.env.js,這兩個(gè)文件就是關(guān)鍵了,我們?cè)贜ODE_ENV下面加一行TESTING:process.env.TESTING

module.exports = {
 NODE_ENV: '"production"',
 TESTING: process.env.TESTING
}

這時(shí)我們就能全局訪問process.env.TESTING變量了,當(dāng)我們npm run dev的時(shí)候,這個(gè)是undefined,當(dāng)npm run devtest的時(shí)候是true, 同理我們可以添加一個(gè)npm run test命令, 與npm run build命令對(duì)應(yīng),加入打包測試的環(huán)境變量.

vue-cli的配置本質(zhì)還是webpack的配置, 普通的webpack配置也可以采用此方法.

上述內(nèi)容就是如何配置vue-cli環(huán)境變量，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。