.env在mode文件中如何添加注釋詳解
前言
Vue-Cli 允許我們?cè)陧?xiàng)目根目錄創(chuàng)建.env.[mode]文件來(lái)設(shè)置一些打包編譯的啟動(dòng)參數(shù),通過(guò)執(zhí)行腳本的時(shí)候加mode參數(shù),指定不同環(huán)境需要加載的配置文件
形如: .env.test
NODE_ENV='production' VUE_APP_PATH='./' VUE_APP_RUNTIME='prod'
問(wèn)題
怎么在 .env.test 文件中添加注釋呢?
分析
這要看vue是怎么解析 .env.test 文件的
通過(guò)啟動(dòng)腳本,一路找到了處理 .env.test 文件的邏輯,讓我們一塊看下
path:node_modules\@vue\cli-service\lib\Service.js
const dotenv = require('dotenv');
// ...
loadEnv (mode) {
const logger = debug('vue:env')
const basePath = path.resolve(this.context, `.env${mode ? `.${mode}` : ``}`)
const localPath = `${basePath}.local`
const load = envPath => {
try {
const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })
dotenvExpand(env)
logger(envPath, env)
} catch (err) {
// only ignore error if file is not found
if (err.toString().indexOf('ENOENT') < 0) {
error(err)
}
}
}
load(localPath)
load(basePath)
// by default, NODE_ENV and BABEL_ENV are set to "development" unless mode
// is production or test. However the value in .env files will take higher
// priority.
if (mode) {
// always set NODE_ENV during tests
// as that is necessary for tests to not be affected by each other
const shouldForceDefaultEnv = (
process.env.VUE_CLI_TEST &&
!process.env.VUE_CLI_TEST_TESTING_ENV
)
const defaultNodeEnv = (mode === 'production' || mode === 'test')
? mode
: 'development'
if (shouldForceDefaultEnv || process.env.NODE_ENV == null) {
process.env.NODE_ENV = defaultNodeEnv
}
if (shouldForceDefaultEnv || process.env.BABEL_ENV == null) {
process.env.BABEL_ENV = defaultNodeEnv
}
}
}
從上面的代碼,可以得知,vue使用dotenv解析 .env.test 文件,并將環(huán)境變量從 .env[mode] 文件中加載到 process.env 環(huán)境變量中
解決(dotenv)
dotenv插件已經(jīng)被 Vue-Cli 集成了
README.md 中有這么一段話:
# marks the beginning of a comment (unless when the value is wrapped in quotes)
這就是我們要找的,在.env.[mode] 文件中,可以使用 # 進(jìn)行注釋
使用測(cè)試
path: .env.prod參數(shù)配置
NODE_ENV='production' # VUE_APP_PATH='/pc/' VUE_APP_PATH='./' VUE_APP_RUNTIME='prod'
package.json文件腳本命令配置--mode參數(shù)
"scripts": {
"build": "vue-cli-service build --mode prod",
},
- 執(zhí)行
npm run build命令,輸出如下:
NODE_ENV=== production
VUE_APP_PATH=== ./
以上就是.env在mode文件中如何添加注釋詳解的詳細(xì)內(nèi)容,更多關(guān)于.env在mode文件添加注釋的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例
很多時(shí)候我們需要使用地址三級(jí)聯(lián)動(dòng),即省市區(qū)三級(jí)聯(lián)動(dòng),這篇文章主要介紹了Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例,感興趣的小伙伴們可以參考一下2018-06-06
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對(duì)比vue2帶來(lái)的性能提升有很多優(yōu)勢(shì),總體來(lái)說(shuō)Vue 3在性能、開(kāi)發(fā)體驗(yàn)和代碼組織方面都有所改進(jìn),使得它更加適合于大型、復(fù)雜的應(yīng)用程序開(kāi)發(fā),需要的朋友可以參考下2023-04-04
vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作
這篇文章主要介紹了vue-cli+webpack項(xiàng)目打包到服務(wù)器后,ttf字體找不到的解決操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue全局注冊(cè)與局部注冊(cè)兩種組件注冊(cè)的方式
本文主要介紹了Vue全局注冊(cè)與局部注冊(cè)兩種組件注冊(cè)的方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
解決前后端分離 vue+springboot 跨域 session+cookie失效問(wèn)題
這篇文章主要介紹了前后端分離 vue+springboot 跨域 session+cookie失效問(wèn)題的解決方法,解決過(guò)程也很簡(jiǎn)單 ,需要的朋友可以參考下2019-05-05
Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解
這篇文章主要為大家介紹了Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08

