環境分類，可以分為 本地環境、測試環境、生產環境等，通過對不同環境配置內容，來實現對不同環境做不同的事情。

AntDesign 項目，通過 config.xxx.ts 添加不同的尾碼來區分配置文件，啟動時候通過尾碼啟動即可。

• config.ts : 公共配置
• config.xxx.ts：不同環境的差異配置

1 查看當前環境

通過代碼process.env.NODE_ENV 查看開發環境

用了 umi 框架，build 時會自動傳入 NODE_ENV == production 參數，start NODE_ENV 參數為 development

• 開發環境：development
• 生產環境：production

2 配置文件

不同項目都有不同的配置文件，umi的配置文件是config，可以在配置文件後添加對應的環境尾碼來區分不同的環境。

參考文檔：https://umijs.org/zh-CN/docs/deployment

• 公共環境：config.ts
• 開發環境：config.dev.ts
• 生產環境：config.prod.ts

3 修改請求後端地址

通過自定義的request中的prefix設置請求後端地址

4 打包

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

Build 出來的環境process.env.NODE_ENV值是production

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

• 方式一：

  npm run build
  

• 方式二：

  umi build
  

• 方式三：

  按鈕觸發，跟方式二一樣，方式二是命令行

  

5 啟動

• 安裝 serve

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

  npm i -g serve
  

• 命令行啟動

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

  

點擊鏈接訪問即可

總結

前端的多環境配置，相對於後端有些麻煩，還有很多可以優化的空間。

本文由博客一文多發平臺 OpenWrite 發佈！