AntDesign多環(huán)境配置啟動過程詳解
環(huán)境分類
可以分為 本地環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境等,通過對不同環(huán)境配置內(nèi)容,來實(shí)現(xiàn)對不同環(huán)境做不同的事情。
AntDesign 項(xiàng)目,通過 config.xxx.ts
添加不同的后綴來區(qū)分配置文件,啟動時候通過后綴啟動即可。
config
.ts : 公共配置config.xxx.ts
:不同環(huán)境的差異配置
1 查看當(dāng)前環(huán)境
通過代碼process.env.NODE_ENV
查看開發(fā)環(huán)境
用了 umi 框架,build 時會自動傳入 NODE_ENV == production 參數(shù),start NODE_ENV 參數(shù)為 development
- 開發(fā)環(huán)境:development
- 生產(chǎn)環(huán)境:production
2 配置文件
不同項(xiàng)目都有不同的配置文件,umi的配置文件是config,可以在配置文件后添加對應(yīng)的環(huán)境后綴來區(qū)分不同的環(huán)境。
參考文檔:https://umijs.org/docs/api/api
- 公共環(huán)境:
config.ts
- 開發(fā)環(huán)境:
config.dev.ts
- 生產(chǎn)環(huán)境:
config.prod.ts
3 修改請求后端地址
通過自定義的request
中的prefix
設(shè)置請求后端地址
4 打包
打包方式分為命令行或界面按鈕兩種,最終都會生成dist
目錄。
Build 出來的環(huán)境process.env.NODE_ENV
值是production
命令行方式,記得要在項(xiàng)目根目錄執(zhí)行。
方式一:
npm run build
方式二:
umi build
方式三:
按鈕觸發(fā),跟方式二一樣,方式二是命令行
5 啟動
安裝 serve
server 是前端啟動的工具,方便本地啟動
npm i -g serve
命令行啟動
// 進(jìn)入打包目錄 cd ./dist // 本地啟動 serve
點(diǎn)擊鏈接訪問即可
總結(jié)
前端的多環(huán)境配置,相對于后端有些麻煩,還有很多可以優(yōu)化的空間。
以上就是AntDesign多環(huán)境配置啟動過程詳解的詳細(xì)內(nèi)容,更多關(guān)于AntDesign多環(huán)境配置啟動的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
nodejs連接dubbo服務(wù)的java工程實(shí)現(xiàn)示例
這篇文章主要介紹了在項(xiàng)目遷移中,nodejs連接dubbo服務(wù)的java工程實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-03-03關(guān)于@Scheduled參數(shù)及cron表達(dá)式解釋
這篇文章主要介紹了關(guān)于@Scheduled參數(shù)及cron表達(dá)式解釋,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-12-12Java日常練習(xí)題,每天進(jìn)步一點(diǎn)點(diǎn)(53)
下面小編就為大家?guī)硪黄狫ava基礎(chǔ)的幾道練習(xí)題(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望可以幫到你2021-08-08java實(shí)現(xiàn)后臺數(shù)據(jù)顯示在前端
這篇文章主要為大家詳細(xì)介紹了java實(shí)現(xiàn)后臺數(shù)據(jù)顯示在前端,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-02-02關(guān)于Spring的統(tǒng)一功能處理(攔截器)實(shí)現(xiàn)
這篇文章主要介紹了關(guān)于Spring的統(tǒng)一功能處理(攔截器)實(shí)現(xiàn),每個方法中都要單獨(dú)寫用戶登錄驗(yàn)證的方法,即使封裝成公共方法,也一樣要傳參調(diào)用和在方法中進(jìn)行判斷,需要的朋友可以參考下2023-05-05Java實(shí)現(xiàn)在線預(yù)覽的示例代碼(openOffice實(shí)現(xiàn))
本篇文章主要介紹了Java實(shí)現(xiàn)在線預(yù)覽的示例代碼(openOffice實(shí)現(xiàn)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11java 輸入一個數(shù)字組成的數(shù)組(輸出該數(shù)組的最大值和最小值)
這篇文章主要介紹了java 輸入一個數(shù)字組成的數(shù)組,輸出該數(shù)組的最大值和最小值,需要的朋友可以參考下2017-02-02