環(huán)境分類

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

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

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

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

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

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

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

2 配置文件

不同項(xiàng)目都有不同的配置文件，umi的配置文件是config，可以在配置文件后添加對(duì)應(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 修改請(qǐng)求后端地址

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

4 打包

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

Build 出來的環(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)擊鏈接訪問即可

總結(jié)

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

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

最新評(píng)論