vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的方法

這篇文章主要介紹“vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的方法”，在日常操作中，相信很多人在vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

一、開發(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)境中了。

對(duì)于不同的環(huán)境，我們可以配置不同的環(huán)境變量，來實(shí)現(xiàn)開發(fā)和生產(chǎn)的兼容。

例如：

開發(fā)環(huán)境時(shí)，我們可以請(qǐng)求自己本地的接口（‘/api’ proxy代理）。

而部署到服務(wù)器上后，應(yīng)該請(qǐ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同級(jí)）新建兩個(gè)配置文件：

.env.development：開發(fā)環(huán)境下的配置文件,執(zhí)行npm run dev命令，會(huì)自動(dòng)加載.env.development文件.

.env.production：生產(chǎn)環(huán)境下的配置文件,執(zhí)行npm run build命令，會(huì)自動(dòng)加載.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)目上線后需要請(qǐ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
})

到此，關(guān)于“vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！