vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置指南
一、開發(fā)環(huán)境和生產(chǎn)環(huán)境
開發(fā)環(huán)境：也就是編碼時(shí)運(yùn)行的環(huán)境，即我們使用npm run dev或者npm run serve運(yùn)行項(xiàng)目到本地時(shí)，項(xiàng)目處于的環(huán)境。
生產(chǎn)環(huán)境：項(xiàng)目部署到服務(wù)器上后處于的環(huán)境，我們使用npm run build將項(xiàng)目打包以后，再運(yùn)行項(xiàng)目，項(xiàng)目就運(yùn)行在生產(chǎn)環(huán)境中了。
對于不同的環(huán)境，我們可以配置不同的環(huán)境變量，來實(shí)現(xiàn)開發(fā)和生產(chǎn)的兼容。
例如：
開發(fā)環(huán)境時(shí)，我們可以請求自己本地的接口（‘/api’ proxy代理）。
而部署到服務(wù)器上后，應(yīng)該請求服務(wù)器提供的接口（‘http://xxxxxx/api/’ 真實(shí)接口）。
我們通過設(shè)置axios的baseUrl可以實(shí)現(xiàn)，但是需要區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境，從而改變baseUrl。
二、配置環(huán)境變量
在項(xiàng)目根目錄下（與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是項(xiàng)目上線后需要請求的服務(wù)器接口。
三、使用全局變量
與vue-cli引用不同，vue-cli引用為：
process.env.變量名
而vite引用為:
import.meta.env.變量名
在配置axios時(shí)使用全局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)文章
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項(xiàng)目中使用axios上傳圖片等文件操作，需要的朋友參考下吧2017-11-11
最近工作中遇到了npm?run?dev報(bào)錯這個問題,通過查找相關(guān)資料最終解決了,所以下面這篇文章主要給大家介紹了關(guān)于npm?run?dev失敗的詳細(xì)解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue如何下載本地靜態(tài)資源static文件夾，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中的文本空格占位符說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue中點(diǎn)擊url下載文件案例詳解，此文需要注意若是文件的url存在跨域的情況，則可能會下載失敗，因?yàn)閒etch請求連接后，由于跨域，拿不到資源，也就無法執(zhí)行后續(xù)的操作，此時(shí)是失敗的,詳細(xì)內(nèi)容跟隨小編一起看看吧2022-04-04
vue 使用localstorage實(shí)現(xiàn)面包屑的操作
這篇文章主要介紹了vue 使用localstorage實(shí)現(xiàn)面包屑的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了VSCode搭建Vue項(xiàng)目的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue-element-admin開發(fā)教程(v4.0.0之前)
本文主要介紹了vue-element-admin開發(fā)教程(v4.0.0之前)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件
這篇文章主要介紹了Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件的相關(guān)知識，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vue2+element-ui實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue2+element-ui使用面包屑導(dǎo)航的正確姿勢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04