uni-app多环境配置实现自动部署的方式详解

目录

• 前言
• 一、uni-app 不同打包方式下的环境配置
• 1.HBuilderX 方式
• 2.基于 vue-cli 命令行方式
• 二、配置多环境实现自动部署
• 总结

前言

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多环境配置自动部署内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！