vue項目環(huán)境變量配置的實現方法
更新時間：2018年10月12日 08:41:15 作者：回調的幸福時光
這篇文章主要介紹了vue項目環(huán)境變量配置的實現方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
問題
實際開發(fā)中，開發(fā)環(huá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 內置的 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'
}),
這樣在項目任意文件中都能調用process.env.NODE_ENV變量，本人測試過，process并不是掛載在window變量上，猜測可能是掛載到了node的process變量。
在運行腳本編譯項目的時候，會根據變量值的不同，設置不同的baseUrl。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
多人協(xié)作模式下，修改代理比較麻煩，而且很容易某個開發(fā)人員會修改了vue.config.js文件后提交了。接下來通過本文給大家分享Vue多環(huán)境代理配置方法思路詳解,需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了vue3動態(tài)綁定背景圖片實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
vue+element搭建后臺小總結 el-dropdown下拉功能
這篇文章主要為大家詳細介紹了vue+element搭建后臺小總結，el-dropdown下拉功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue2.x引入threejs,如果在開發(fā)過程中出現threejs生成的canvas出現外邊框,只需要用css樣式修改，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了詳解vue-resource promise兼容性問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關于element中el-autocomplete的常見用法的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用element具有一定的參考學習價值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue長按事件touch,文末給大家補充介紹了Vue長按觸摸事件的實現代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
在Vue3中箭頭函數被廣泛支持,尤其是在組合式API的上下文中,這篇文章主要給大家介紹了關于Vue3學習之語法糖、箭頭函數、函數聲明的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了基于vue開發(fā)的在線付費課程應用過程，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue項目實現img的src動態(tài)賦值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03