環(huán)境分類

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

AntDesign 項(xiàng)目，通過(guò) config.xxx.ts 添加不同的后綴來(lái)區(qū)分配置文件，啟動(dòng)時(shí)候通過(guò)后綴啟動(dòng)即可。

• config.ts : 公共配置
• config.xxx.ts：不同環(huán)境的差異配置

1 查看當(dāng)前環(huán)境

通過(guò)代碼process.env.NODE_ENV 查看開(kāi)發(fā)環(huán)境

用了 umi 框架，build 時(shí)會(huì)自動(dòng)傳入 NODE_ENV == production 參數(shù)，start NODE_ENV 參數(shù)為 development

• 開(kāi)發(fā)環(huán)境：development
• 生產(chǎn)環(huán)境：production

2 配置文件

不同項(xiàng)目都有不同的配置文件，umi的配置文件是config，可以在配置文件后添加對(duì)應(yīng)的環(huán)境后綴來(lái)區(qū)分不同的環(huán)境。

參考文檔：https://umijs.org/docs/api/api

• 公共環(huán)境：config.ts
• 開(kāi)發(fā)環(huán)境：config.dev.ts
• 生產(chǎn)環(huán)境：config.prod.ts

3 修改請(qǐng)求后端地址

通過(guò)自定義的request中的prefix設(shè)置請(qǐng)求后端地址

4 打包

打包方式分為命令行或界面按鈕兩種，最終都會(huì)生成dist目錄。

Build 出來(lái)的環(huán)境process.env.NODE_ENV值是production

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

方式一：

npm run build

方式二：

umi build

方式三：

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

5 啟動(dòng)

安裝 serve

server 是前端啟動(dòng)的工具，方便本地啟動(dòng)

npm i -g serve

命令行啟動(dòng)

// 進(jìn)入打包目錄
  cd ./dist
// 本地啟動(dòng)
serve

點(diǎn)擊鏈接訪問(wèn)即可

總結(jié)

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

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

最新評(píng)論