環(huán)境分類

可以分為 本地環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境等，通過對不同環(huán)境配置內(nèi)容，來實現(xiàn)對不同環(huán)境做不同的事情。

AntDesign 項目，通過 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 配置文件

不同項目都有不同的配置文件，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

命令行方式，記得要在項目根目錄執(zhí)行。

方式一：

npm run build

方式二：

umi build

方式三：

按鈕觸發(fā)，跟方式二一樣，方式二是命令行

5 啟動

安裝 serve

server 是前端啟動的工具，方便本地啟動

npm i -g serve

命令行啟動

// 進入打包目錄
  cd ./dist
// 本地啟動
serve

點擊鏈接訪問即可

總結(jié)

前端的多環(huán)境配置，相對于后端有些麻煩，還有很多可以優(yōu)化的空間。

以上就是AntDesign多環(huán)境配置啟動過程詳解的詳細(xì)內(nèi)容，更多關(guān)于AntDesign多環(huán)境配置啟動的資料請關(guān)注腳本之家其它相關(guān)文章！