vue項目環(huán)境變量配置的實現(xiàn)方法
問題
實際開發(fā)中,開發(fā)環(huán)境和生產(chǎn)環(huán)境中一些變量是不同的,比如接口地址等等,打包之前需要手動切換。
編譯時
新建env.js
let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = 'https://xxxxxxxxx'; } else if (process.env.NODE_ENV == 'development') { baseUrl = '/api' } export { baseUrl }
process.env.NODE_ENV 是通過webpack 內(nèi)置的 DefinePlugin 為所有的依賴定義的變量
webpack.dev.conf.js
new webpack.DefinePlugin({ 'process.env.NODE_ENV': 'development' }),
webpack.prod.conf.js
new webpack.DefinePlugin({ 'process.env.NODE_ENV': 'production' }),
這樣在項目任意文件中都能調(diào)用process.env.NODE_ENV變量,本人測試過,process并不是掛載在window變量上,猜測可能是掛載到了node的process變量。
在運行腳本編譯項目的時候,會根據(jù)變量值的不同,設(shè)置不同的baseUrl。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue+element搭建后臺小總結(jié) el-dropdown下拉功能
這篇文章主要為大家詳細介紹了vue+element搭建后臺小總結(jié),el-dropdown下拉功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-09-09element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03Vue3學(xué)習(xí)之語法糖、箭頭函數(shù)、函數(shù)聲明詳解
在Vue3中箭頭函數(shù)被廣泛支持,尤其是在組合式API的上下文中,這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)之語法糖、箭頭函數(shù)、函數(shù)聲明的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08