uni-app的多環境部署配置

本文記錄的方法适用于

vue-cli

方式建立的 uni-app 項目。

環境區分

官方文檔說明：

開發環境和生産環境

uni-app 可通過 process.env.NODE_ENV 判斷目前環境是開發環境還是生産環境。一般用于連接配接測試伺服器或生産伺服器的動态切換。

在HBuilderX 中，點選“運作”編譯出來的代碼是開發環境，點選“發行”編譯出來的代碼是生産環境

解決方案

1. 使用基于vue-cli指令行方式建立項目

2. 添加必要的環境變量， VUE_APP_ 起始，例如 VUE_APP_BASE_API

   即在項目根目錄建立不同環境的變量配置檔案，并分别寫入環境所需配置

   • .env.development
   • .env.test
   • .env.production

3. 然後可以通過 VUE_APP_BASE_API 通路

   例如：在項目内請求接口的地方設定 baseurl 為 process.env.VUE_APP_BASE_API

4. 修改 package.json

   增加以下腳本，在啟動或者打包時以切換不同伺服器(不一定完全按照下方設定)。

   這裡的需求是在開發模式啟動時友善切換開發、測試、生産環境的資料庫友善驗證問題，以及發行至各環境

"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build", 
"dev:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-serve --watch",
"dev:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-serve --watch",
"dev:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --watch",           

1. 最後像普通vue項目一樣使用就行了

npm run dev:h5-test           

參考資料

• uni-app如何多環境配置部署，使用npm的方式
• 指令行打包