vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置指南
一、開發(fā)環(huán)境和生產(chǎn)環(huán)境
開發(fā)環(huán)境：也就是編碼時運行的環(huán)境，即我們使用npm run dev或者npm run serve運行項目到本地時，項目處于的環(huán)境。
生產(chǎn)環(huán)境：項目部署到服務(wù)器上后處于的環(huán)境，我們使用npm run build將項目打包以后，再運行項目，項目就運行在生產(chǎn)環(huán)境中了。
對于不同的環(huán)境，我們可以配置不同的環(huán)境變量，來實現(xiàn)開發(fā)和生產(chǎn)的兼容。
例如：
開發(fā)環(huán)境時，我們可以請求自己本地的接口（‘/api’ proxy代理）。
而部署到服務(wù)器上后，應(yīng)該請求服務(wù)器提供的接口（‘http://xxxxxx/api/’ 真實接口）。
我們通過設(shè)置axios的baseUrl可以實現(xiàn)，但是需要區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境，從而改變baseUrl。
二、配置環(huán)境變量
在項目根目錄下（與package.json同級）新建兩個配置文件：
.env.development：開發(fā)環(huán)境下的配置文件,執(zhí)行npm run dev命令，會自動加載.env.development文件.
.env.production：生產(chǎn)環(huán)境下的配置文件,執(zhí)行npm run build命令，會自動加載.env.production文件
.env.development文件：
ENV = 'development' VITE_BASE_URL='/api'
.env.production
ENV = 'production' VITE_BASE_URL = 'http://xxxxxx/api/'
這里的VITE_BASE_URL是項目上線后需要請求的服務(wù)器接口。
三、使用全局變量
與vue-cli引用不同，vue-cli引用為：
process.env.變量名
而vite引用為:
import.meta.env.變量名
在配置axios時使用全局baseUrl:
const service = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
timeout: 5000
})
總結(jié)
到此這篇關(guān)于vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的文章就介紹到這了,更多相關(guān)vue3 vite全局變量配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue的h5日歷組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
vue在IIS服務(wù)器部署后路由無法跳轉(zhuǎn)
在IIS服務(wù)器上部署Vue項目時,可能會遇到路由無法正常跳轉(zhuǎn)的問題,解決方法有兩種,下面就來具體介紹一下解決方法,感興趣的可以了解一下2024-10-10
Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建過程
Mock.js是一個模擬數(shù)據(jù)的生成器，用來幫助前端調(diào)試開發(fā)、進(jìn)行前后端的原型分離以及用來提高自動化測試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建,需要的朋友可以參考下2023-09-09
vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)
網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章，但基本都是本地攔截請求返回數(shù)據(jù)，本文主要介紹了vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue.js 動態(tài)組件詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue中img或元素背景圖片無法顯示或路徑錯誤的解決方案，具有很好的參考價值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue router 配置路由的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽
本文主要介紹了vue中實現(xiàn)全屏以及對退出全屏的監(jiān)聽，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
vue3學(xué)習(xí)筆記簡單封裝axios示例實現(xiàn)
這篇文章主要為大家介紹了vue3學(xué)習(xí)筆記簡單封裝axios示例實現(xiàn)，2022-06-06
這篇文章主要介紹了從零開始在NPM上發(fā)布一個Vue組件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12