.env[mode]文件中如何添加註釋
前言
Vue-Cli
允許我們在項目根目錄創建.env.[mode]
文件來設置一些打包編譯的啟動參數,通過執行腳本的時候加mode
參數,指定不同環境需要加載的配置文件
形如: .env.prod
NODE_ENV='production'
VUE_APP_PATH='./'
VUE_APP_RUNTIME='prod'
問題
怎麼在 .env.prod
文件中添加註釋呢?
分析
這要看vue
是怎麼解析 .env.prod
文件的
通過啟動腳本參數 --mode prod
,一路找到了處理 .env.prod
文件的邏輯,讓我們一塊看下
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.prod
文件,並將環境變量從 .env[mode]
文件中加載到 process.env
環境變量中
解決(dotenv)
dotenv
插件已經被 Vue-Cli
集成了
README.md
中有這麼一段話:
- 「# marks the beginning of a comment (unless when the value is wrapped in quotes)」
這就是我們要找的,在.env.[mode]
文件中,可以使用 #
進行注釋
使用測試
path: .env.prod
參數配置
NODE_ENV='production'
# VUE_APP_PATH='/pc/'
VUE_APP_PATH='./'
VUE_APP_RUNTIME='prod'
package.json
文件腳本命令配置--mode
參數
"scripts": {
"build": "vue-cli-service build --mode prod",
},
- 執行
npm run build
命令,輸出如下:
NODE_ENV=== production
VUE_APP_PATH=== ./
本文到此為止,要想了解更多dotenv
請自行探索,感謝觀看😉
我是 甜點cc
熱愛前端,也喜歡專研各種跟本職工作關係不大的技術,技術、產品興趣廣泛且濃厚,等待着一個創業機會。主要致力於分享實用技術乾貨,希望可以給一小部分人一些微小幫助。
我排斥「新人迷茫,老人看戲」的現象,希望能和大家一起努力破局。營造一個良好的技術氛圍,為了個人、為了我國的數字化轉型、互聯網物聯網技術、數字經濟發展做一點點貢獻。數風流人物還看中國、看今朝、看你我。