uni-app多環境配置實現自動部署的方式詳解

Posted on by

前言

uni-app 項目在不同階段需要部署到不同的環境，比如開發環境（dev）、測試環境（test）、UAT 環境（uat）、生產環境（prod）等，那麼如何通過自動化構建工具實現在多環境下自動部署呢？我們先來看看不同打包方式下的環境配置。

一、uni-app 不同打包方式下的環境配置

uni-app 可通過 HBuilderX 方式和基於 vue-cli 命令行方式進行打包，兩種方式下進行打包的開發環境和生產環境是不同的。

1.HBuilderX 方式

uni-app 可通過 process.env.NODE_ENV 判斷當前環境是開發環境還是生產環境。一般用於連接測試服務器或生產服務器的動態切換。

在HBuilderX 中，點擊 “運行” 編譯出來的代碼是開發環境，點擊 “發行” 編譯出來的代碼是生產環境。

2.基於 vue-cli 命令行方式

使用基於 vue-cli 命令行方式創建項目可通過添加必要的環境變量和判斷實現多環境配置，然後在編譯時帶上環境參數即可。

二、配置多環境實現自動部署

由以上分析可知，我們需要通過基於 vue-cli 命令行方式來實現自動化部署。

1.編寫 js 文件，對環境進行判斷

// 開發環境
const dev = {
  common: "http://192.168.xx.xx:2000",
  store:"http://192.168.xx.xx:2001",
  buyer: "http://192.168.xx.xx:2002"

};
// UAT環境
const uat = {
  common: "http://124.xx.xx.xx:2000",
  store:"http://124.xx.xx.xx:2001",
  buyer: "http://124.xx.xx.xx:2002"

};
// 生產環境
const prod = {
  common: "http://128.xx.xx.xx:2000",
  store:"http://128.xx.xx.xx:2001",
  buyer: "http://128.xx.xx.xx:2002"
  
};

//默認生產環境
let api = dev;
//如果是開發環境
if (process.env.NODE_ENV == "development") {
  api = dev;
} else if (process.env.NODE_ENV == "uat") {
  api = uat;
} else {
  api = prod;
}

2.修改 package.json 文件

{
  "name": "shop-uniapp",
  "version": "1.0.0",
  "description": "#####開源不易，如有幫助請點Star",
  "main": "main.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:h5-dev": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=development node /usr/local/uniapp-cli/bin/uniapp-cli.js",
    "build:h5-uat": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uat node /usr/local/uniapp-cli/bin/uniapp-cli.js",
    "build:h5-prod": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=prod node /usr/local/uniapp-cli/bin/uniapp-cli.js"
  },
  "repository": {
    "type": "git",
    "url": "http://xxx/shop-uniapp.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3.打包

npm install cross-env -g && npm install && npm run build:h5-uat

總結

到此這篇關於uni-app多環境配置實現自動部署的文章就介紹到這瞭,更多相關uni-app多環境配置自動部署內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：