vue項(xiàng)目環(huán)境變量配置的實(shí)現(xiàn)方法
更新時(shí)間：2018年10月12日 08:41:15 作者：回調(diào)的幸福時(shí)光
這篇文章主要介紹了vue項(xiàng)目環(huán)境變量配置的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
問題
實(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變量，本人測(cè)試過，process并不是掛載在window變量上，猜測(cè)可能是掛載到了node的process變量。
在運(yùn)行腳本編譯項(xiàng)目的時(shí)候，會(huì)根據(jù)變量值的不同，設(shè)置不同的baseUrl。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)
這篇文章主要介紹了vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用elementUI table展開行內(nèi)嵌套table問題
這篇文章主要介紹了使用elementUI table展開行內(nèi)嵌套table問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue登錄后添加動(dòng)態(tài)路由并跳轉(zhuǎn)的實(shí)踐分享
這篇文章講給大家詳細(xì)介紹一下Vue如何實(shí)現(xiàn)登錄后添加動(dòng)態(tài)路由并跳轉(zhuǎn)，文章通過代碼示例介紹的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的的幫助,需要的朋友可以參考下2023-07-07
瀏覽器事件循環(huán)與vue nextTicket的實(shí)現(xiàn)
這篇文章主要介紹了瀏覽器事件循環(huán)（結(jié)合vue nextTicket）的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過大問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在 Vue.js 中,組件的重復(fù)渲染是一個(gè)常見的問題,可能會(huì)影響應(yīng)用的性能和用戶體驗(yàn),為了提升應(yīng)用的性能,開發(fā)者需要理解 Vue 的渲染機(jī)制,并應(yīng)用有效的方法來避免不必要的組件重渲染,本文將深入探討如何防止 Vue 組件重復(fù)渲染,并提供相關(guān)示例代碼,需要的朋友可以參考下2024-10-10
這篇文章主要為大家介紹了vue?px轉(zhuǎn)rem配置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
詳解如何使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)易的vue功能
這篇文章主要為大家介紹了如何使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)易的vue功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單
這篇文章主要介紹了vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue和react中props變化后如何修改state，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08