項(xiàng)目開發(fā)過程中,至少會(huì)經(jīng)歷開發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境(即正式環(huán)境)三個(gè)階段。不同階段請(qǐng)求的狀態(tài)(如接口地址等)不盡相同,若手動(dòng)切換接口地址是相當(dāng)繁瑣且易出錯(cuò)的。于是環(huán)境變量配置的需求就應(yīng)運(yùn)而生,我們只需做簡(jiǎn)單的配置,把環(huán)境狀態(tài)切換的工作交給代碼。
開發(fā)環(huán)境(development)
顧名思義,開發(fā)使用的環(huán)境,每位開發(fā)人員在自己的dev分支上干活,開發(fā)到一定程度,同事會(huì)合并代碼,進(jìn)行聯(lián)調(diào)。測(cè)試環(huán)境(testing)
測(cè)試同事干活的環(huán)境啦,一般會(huì)由測(cè)試同事自己來部署,然后在此環(huán)境進(jìn)行測(cè)試生產(chǎn)環(huán)境(production)
生產(chǎn)環(huán)境是指正式提供對(duì)外服務(wù)的,一般會(huì)關(guān)掉錯(cuò)誤報(bào)告,打開錯(cuò)誤日志。(正式提供給客戶使用的環(huán)境。)
注意:一般情況下,一個(gè)環(huán)境對(duì)應(yīng)一臺(tái)服務(wù)器,也有的公司開發(fā)與測(cè)試環(huán)境是一臺(tái)服務(wù)器?。。?/code>
項(xiàng)目根目錄分別添加 開發(fā)、生產(chǎn)和測(cè)試環(huán)境的文件!
.env.development
.env.production
.env.test
文件內(nèi)容:
# 變量必須以 VITE_ 為前綴才能暴露給外部讀取
NODE_ENV = 'development'
VITE_APP_TITLE = '豪享買運(yùn)營(yíng)平臺(tái)'
VITE_APP_BASE_API = '/dev-api'
NODE_ENV = 'production'
VITE_APP_TITLE = '豪享買運(yùn)營(yíng)平臺(tái)'
VITE_APP_BASE_API = '/prod-api'
# 變量必須以 VITE_ 為前綴才能暴露給外部讀取
NODE_ENV = 'test'
VITE_APP_TITLE = '豪享買運(yùn)營(yíng)平臺(tái)'
VITE_APP_BASE_API = '/test-api'
配置運(yùn)行命令:package.json
會(huì)以這些環(huán)境進(jìn)行打包
"scripts": {
"dev": "vite --open",
+ "build:test": "vue-tsc && vite build --mode test",
+ "build:pro": "vue-tsc && vite build --mode production",
"preview": "vite preview"
},