vue項(xiàng)目環(huán)境變量配置的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-10-25 16:50:11 來源：腳本之家閱讀：142 作者：回調(diào)的幸福時(shí)光欄目：web開發(fā)

問題

實(shí)際開發(fā)中，開發(fā)環(huán)境和生產(chǎn)環(huán)境中一些變量是不同的，比如接口地址等等，打包之前需要手動(dòng)切換。

編譯時(shí)

新建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'
  }),

這樣在項(xiàng)目任意文件中都能調(diào)用process.env.NODE_ENV變量，本人測試過，process并不是掛載在window變量上，猜測可能是掛載到了node的process變量。

在運(yùn)行腳本編譯項(xiàng)目的時(shí)候，會(huì)根據(jù)變量值的不同，設(shè)置不同的baseUrl。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue項(xiàng)目環(huán)境變量配置的實(shí)現(xiàn)方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽