快捷導(dǎo)航

uni-app多環(huán)境配置實(shí)現(xiàn)自動(dòng)部署的方式詳解

更新時(shí)間：2022年06月01日 14:34:01 作者：奔跑吧鄧鄧子

前后端分離開(kāi)發(fā)模式中,無(wú)論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uni-app多環(huán)境配置實(shí)現(xiàn)自動(dòng)部署的相關(guān)資料,需要的朋友可以參考下

前言

uni-app 項(xiàng)目在不同階段需要部署到不同的環(huán)境，比如開(kāi)發(fā)環(huán)境（dev）、測(cè)試環(huán)境（test）、UAT 環(huán)境（uat）、生產(chǎn)環(huán)境（prod）等，那么如何通過(guò)自動(dòng)化構(gòu)建工具實(shí)現(xiàn)在多環(huán)境下自動(dòng)部署呢？我們先來(lái)看看不同打包方式下的環(huán)境配置。

一、uni-app 不同打包方式下的環(huán)境配置

uni-app 可通過(guò) HBuilderX 方式和基于 vue-cli 命令行方式進(jìn)行打包，兩種方式下進(jìn)行打包的開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境是不同的。

1.HBuilderX 方式

uni-app 可通過(guò) process.env.NODE_ENV 判斷當(dāng)前環(huán)境是開(kāi)發(fā)環(huán)境還是生產(chǎn)環(huán)境。一般用于連接測(cè)試服務(wù)器或生產(chǎn)服務(wù)器的動(dòng)態(tài)切換。

在HBuilderX 中，點(diǎn)擊 “運(yùn)行” 編譯出來(lái)的代碼是開(kāi)發(fā)環(huán)境，點(diǎn)擊 “發(fā)行” 編譯出來(lái)的代碼是生產(chǎn)環(huán)境。

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

使用基于 vue-cli 命令行方式創(chuàng)建項(xiàng)目可通過(guò)添加必要的環(huán)境變量和判斷實(shí)現(xiàn)多環(huán)境配置，然后在編譯時(shí)帶上環(huán)境參數(shù)即可。

二、配置多環(huán)境實(shí)現(xiàn)自動(dòng)部署

由以上分析可知，我們需要通過(guò)基于 vue-cli 命令行方式來(lái)實(shí)現(xiàn)自動(dòng)化部署。

1.編寫(xiě) js 文件，對(duì)環(huán)境進(jìn)行判斷

// 開(kāi)發(fā)環(huán)境
const dev = {
  common: "http://192.168.xx.xx:2000",
  store:"http://192.168.xx.xx:2001",
  buyer: "http://192.168.xx.xx:2002"

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

};
// 生產(chǎn)環(huán)境
const prod = {
  common: "http://128.xx.xx.xx:2000",
  store:"http://128.xx.xx.xx:2001",
  buyer: "http://128.xx.xx.xx:2002"
  
};

//默認(rèn)生產(chǎn)環(huán)境
let api = dev;
//如果是開(kāi)發(fā)環(huán)境
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": "#####開(kāi)源不易，如有幫助請(qǐng)點(diǎn)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

總結(jié)

到此這篇關(guān)于uni-app多環(huán)境配置實(shí)現(xiàn)自動(dòng)部署的文章就介紹到這了,更多相關(guān)uni-app多環(huán)境配置自動(dòng)部署內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: