uni-app多环境部署解决方案详解

目录
  • 前言
  • 尝试几种方式
  • 解决方案
    • 部署方式
    • 获取接口
    • 部署路径
    • 命令行
    • 其他
  • 总结

前言

最近几周都在处理公司的移动业务,而为在后期能统一多端,解放自己,迎合公司的技术栈;选用了 uni-app 来开发。开发前期重新对公司移动业务做深入了解,重构大部分业务逻辑,也抽离出基础组件;但实际到部署的时候,出现来问题;由于现在只考虑 H5 端,部署和测试会出现多环境配置,但是我使用的 HBuilderX 工具创建的工程,所以只存在开发环境:development 和生产环境:production

尝试几种方式

查询官网和论坛并没有很好的配置方案;官网的一些配置可以提供参考。

  • package.json

对于根目录下 package.json 里可以提供对不同平台的编译处理,这里指不同平台并不是不同环境,环境还是只有开发和生产两种环境

  • vue.config.js

由于没有使用 VUE3 来开发,所以默认的配置项还是基于 webpack。如果项目根目录没有该配置项,可以自行创建 vue.config.js 文件,但是很遗憾还是没有可以处理多种环境下的一个配置。而且它还存在一些约束:

不过它可以添加一些自定义的变量

const webpack = require('webpack')

module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
        args[0]['process.env'].VUE_APP_TEST = '"test"'
        return args
      })
  }
}

解决方案

多环境部署,实际是需要对应自己部署环境,存在不同配置项。而实际业务中存在的环境可以是无限的,一般最基础而言需要三种:

  • 开发环境
  • 测试环境
  • 生产环境

对于公司现有业务,只针对 H5 端,需要的配置可能只有:

  • 接口:开发、测试、生产对应的接口配置不同
  • 部署路径:测试、开发对应的部署路径不同

如果我们解决这两个,那部署方案实现一大半。对于环境配置,从 vue-cli 中可以看到很多;cli 配置基于 .env.x 不同文件来获取不同配置项,这里我们可以参考它来自己实现获取配置项。

部署方式

部署方式,通过命令行来解决;后续可以更好的对接自动化部署,而项目中通过 HBuilderX 工具创建,需要使用它的 cli 程序,它支持常见的三端打包;H5 端打包命令,在 package.json 设置:

"build": "cli publish --platform h5 --project 项目名称",

获取接口

项目根目录创建不同环境下需要的配置:.env.test.env.prod

# .env.test
NODE_ENV=test
BASE_API = '/test'
h5.router.base_config = '/h5/'
h5.title_config = 'h5'

实际上我们只需要测试和生产两种配置,开发配置项在代码内部修改,这样可以增加效率,不用每次修改后,再重启项目。

配置项对应不同环境,而环境可以通过在 package.json 中设置不同参数来区分;

	"scripts": {
		"build:config:test": "node ./deploy/index --mode=test",
		"build:config:prod": "node ./deploy/index --mode=prod",
	},

可以获取 process.argv 变量读取到设置的环境;后续还想设置什么变量也可以在后面直接添加,类似:--test=test

// yargs.js
module.exports = function() {
	let args = process.argv;
	let argv = {};
	for (let i = 2; i < args.length; ++i) {
		let cur = args[i];
		if (/^(--)(\S*)(=)/.test(cur)) {
			const keys = cur.split('=')
			argv[keys[0].slice(2)] = keys[1];
		}
	}
	return argv
}

/**
 * {
 *      mode: 'test'
 * }
 */

获取配置后,需要读取配置,这里直接使用 nodefs 模块读取文件内容

const fs = require('fs')
const path = require('path')
// 解析函数
function parse() {
    ...
}

module.exports = function() {
    // 获取环境
	const config = yargs();

	const env = config.mode;
	const envPath = path.resolve(__dirname, '../../') + '/.env.' + env

	try{
		const data = fs.readFileSync(envPath, 'utf8')
        // 解析文件
		return parse(data)
	}catch(e){
		console.log('读取env出错:' + JSON.stringify(e));
	}
}

其中解析函数,由于不想新增依赖增加项目负担,直接参考 dotenv 的 parse 函数解析出文件内容;得到类似的对象:

{
    NODE_ENV: 'test',
    BASE_API: '/test',
    // ...
}

解析出配置内容,接下来动态配置文件;由于项目存在可能部署在客户内网环境下,这里采用动态生产一个共用的配置文件,在项目获取该配置项;后续运维人员可以想配置什么就配置什么。

// 写入 /static/global.js
writeGlobalConfig()

function writeGlobalConfig() {
	const _global = {}
	for (let key in config) {
		if (key.includes('_API')) {
			_global[key] = config[key]
		}
	}
	const data = `window._GLOBAL__ = ${JSON.stringify(_global)}`
	fs.writeFileSync(path.resolve(__dirname, '../static/global.js'), data)
}

在项目中生产环境下取公用配置项

const NODE_ENV = process.env.NODE_ENV;

/// 默认根目录模板 tempalte.h5 模板引入全局接口 static/global.js
const GLOBAL_CONFIG = window._GLOBAL__ || {};

const defaultAPI = {
	BASE_API: {
		development: ['/test'],
		production: GLOBAL_CONFIG.BASE_API,
	},
	SOCKET_API_BIDDIGN: {
		development: ['ws://test'],
		production: GLOBAL_CONFIG.SOCKET_API_BIDDIGN,
	},
    // ...
}

部署路径

PC 端或者是 H5 测试和生产环境上的部署路径可能会不同;由于创建项目使用其开发工具创建,需要统一工具和更方便的更新 uni-app,不考虑使用 vue-cli 方式。只能动态修改 manifest.json 文件。

uni-app 的部署路径是修改 manifest.jsonh5.router.base。对应 Router 中的 base

// manifest.js
const fs = require('fs')
const path = require('path')

const manifestPath = path.resolve(__dirname, '../../') + '/manifest.json'

let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' })
function replaceManifest(path, value) {
  const arr = path.split('.')
  const len = arr.length
  const lastItem = arr[len - 1]

  let i = 0
  let ManifestArr = Manifest.split(/\n/)

  for (let index = 0; index < ManifestArr.length; index++) {
    const item = ManifestArr[index]
    if (new RegExp(`"${arr[i]}"`).test(item)) ++i;
    if (i === len) {
      const hasComma = /,/.test(item)
      ManifestArr[index] = item.replace(new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`), `"${lastItem}": ${value}${hasComma ? ',' : ''}`)
      break;
    }
  }

  Manifest = ManifestArr.join('\n')
}
module.exports = function(options) {
	for (let key in options) {
		replaceManifest(key, `"${options[key]}"`)
	}
	fs.writeFileSync(manifestPath, Manifest, {
	  "flag": "w"
	})
}

前面我们已经获取到配置文件内容,这里可以直接修改文件;这里需要给一个标明这是修改 manifest.json 的后缀。

h5.router.base_config = '/h5/'
h5.title_config = 'h5'

这里配置项如果 _confg 结束的变量就是修改 manifest.json

const path = require('path')
const fs = require('fs')
const env = require('./modules/readEnv')
const parseManifest = require('./modules/manifest')
const config = env();

function writeManifest() {
	const _global = {}
	for (let key in config) {
		if (key.includes('_config')) {
			const k = key.slice(0, -7)
			_global[k] = config[key]
		}
	}
	parseManifest(_global);
}

命令行

准备工作完成后,可以编写对应的命令,来简化我们的操作;

	"scripts": {
		"build": "cli publish --platform h5 --project test-h5",
		"build:config:test": "node ./deploy/index --mode=test",
		"build:config:prod": "node ./deploy/index --mode=prod",
		"build:prod": "npm run build:config:prod && npm run build",
		"deploy:test": "npm run build:config:test && npm run build && fd-cli"
	},

&& 符号是串行命令;& 是并行命令,其中 fd-cli 是个部署命令,也是我以前基于业务需要开发的一个前端简易部署命令。

其他

这里只针对 H5 端做了处理,如果需要做多平台,也可以在命令行后面接不同平台参数,然后在部署打包前处理好逻辑;比如在打包前根据自己定义的环境变量添加参数

// vue.config.js
const webpack = require('webpack')

// 生成不同环境不同平台的配置
const config = require('./config')

module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
        // config.VUE_APP_TEST
        for(let key in config) {
            args[0]['process.env'][key] = `"${config.VUE_APP_TEST}"`
        }
        return args
      })
  }
}

总结

在开发阶段完成后,需要特别注意一些重复的步骤或者是需要手动修改的操作,只要是手动修改,就会增加上线分险,特别是后来者接受项目的时候。当然也要文档齐全

相关源码:地址

到此这篇关于uni-app多环境部署解决的文章就介绍到这了,更多相关uni-app多环境部署内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-11-13

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

目录 前言 一.uni-app 不同打包方式下的环境配置 1.HBuilderX 方式 2.基于 vue-cli 命令行方式 二.配置多环境实现自动部署 总结 前言 uni-app 项目在不同阶段需要部署到不同的环境,比如开发环境(dev).测试环境(test).UAT 环境(uat).生产环境(prod)等,那么如何通过自动化构建工具实现在多环境下自动部署呢?我们先来看看不同打包方式下的环境配置. 一.uni-app 不同打包方式下的环境配置 uni-app 可通过 HBuilderX 方式和

Vite多环境配置项目高定制化能力详解

目录 业务背景 多环境场景的业务形态 Vite多环境方案实现 多模式文件配置 自定义环境变量 Vite默认环境变量 通过插件透传环境变量 客户端环境差异定制 效果图 解决的业务场景思考 业务背景 近些年来,随着前端工程架构发展,使得前端项目中也能拥有如后端工程的模块能力.正所谓 “能力(越)越大(来),责任(越)越大(卷)”,现在的前端工程不仅仅要满足业务需求,还伴随更多复杂的环境适配问题,例如: api请求的域名会根据不同环境而不同: 线上环境和测试环境在打包策略有所不同「如线上要隔离sour

Windows环境下实现Jenkins部署的教程详解

前言 本章主要讲述Windows环境下的Jenkins的自动化部署 关于JenKins下载的方式有两种, 1)直接下载war包,用tomcat/java命令运行 2)msi安装,作为系统服务后台运行 推荐第二种方法很简单: 链接: https://pan.baidu.com/s/1i-qJvoURqTaIKqxoEr170A 提取码: qz6j 我这篇blog主要讲述第一种方法 前提准备工作:安装配置好java环境(关于Java环境自行百度)和Tomcat环境 我这里是jdk1.8和Tomcat

Spring事务Transaction配置的五种注入方式详解

前段时间对spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. 总结如下: Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSource.TransactionManager这两部分只是会根据数据访问方式有所变化,

VirtualBox软件下载安装及Linux环境安装部署图文教程详解

一.VirtualBox软件下载及安装 首先进入VirtualBox官方网站进行软件下载, https://www.virtualbox.org/,目前VirtualBox最新的版本为6.1,详细如下图: 点击"Downloads"按钮,即跳转自"VirtualBox 6.1.4 platform packages"下载页面 选择"Windows hosts",即进行VirtualBox软件下载 双击"VirtualBox-6.1.4-

python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境

python的pip是其包管理工具,相当方便好用.本文只介绍pip 如何通过其freeze命令打离线包,及其离线包的安装脚本.这个知识点,特别适用于不适合连通互联网,设备需要物理隔绝,保密要求严格的客户环境. 环境 操作系统: Centos 7.7 python 版本: 2.7 客户网络环境: 离线 研发网络环境:联网 pip 安装 (1)下载rpm包 首先研发环境(联网),去 https://pkgs.org/download/python-pip选择合适的pip rpm离线包下载,如下图:

Vue+Koa2 打包后进行线上部署的教程详解

最近使用Vue和Koa2重构了自己的博客,过程中踩了不少坑,查了很多资料,最后总算成功上线.之后我计划围绕这个过程写一系列文章,讲讲如何用Vue+Koa2写一套网站. 而现在,先来讲讲最后一步,在写完Vue和Koa2后,如何将它们部署到线上. 1.将Vue和Koa2结合 很多人在打完包后就不知道怎么做了,毕竟后面都是后端的事情.如果你用的是Vue-cli3.0,那么打包这一步会非常简单,只需要执行一条命令即可,其它的不用关心: npm run build 之后会生成一个dist的文件夹,将它放到

Spring Cloud中使用jib进行docker部署的步骤详解

Jib介绍 Jib 是 Google 开发的可以直接构建 Java 应用的 Docker 和 OCI 镜像的类库,以 Maven 和 Gradle 插件形式提供. 通过 Jib,Java 开发者可以使用他们熟悉的 Java 工具来构建容器.Jib 是一个快速而简单的容器镜像构建工具,它负责处理将应用程序打包到容器镜像中所需的所有步骤.它不需要你编写 Dockerfile 或安装 Docker,而且可以直接集成到 Maven 和 Gradle中 -- 只需要将插件添加到构建中,就可以立即将 Jav

SpringBoot项目jar和war打包部署方式详解

目录 jar与war jar包部署运行 war包部署运行 jar与war Spring Boot项目开发完成后,需要以jar或war的方式将项目打包部署到测试开发环境. jar即Java Archive,是Java归档文件,该文件格式与平台无关,它允许将许多文件组合成一个压缩文件.Java程序都可以打成jar包,目前Docker广泛使用,Java项目都会打成可执行的jar包,最终构建为镜像文件来运行. jar文件格式基于流行的ZIP文件格式.与ZIP文件不同的是,jar文件不仅用于压缩和发布,而

Spark三种属性配置方式详解

随着Spark项目的逐渐成熟, 越来越多的可配置参数被添加到Spark中来.在Spark中提供了三个地方用于配置: 1.Spark properties:这个可以控制应用程序的绝大部分属性.并且可以通过 SparkConf对象或者Java 系统属性进行设置: 2.环境变量(Environment variables):这个可以分别对每台机器进行相应的设置,比如IP.这个可以在每台机器的$SPARK_HOME/ conf/spark-env.sh脚本中进行设置: 3.日志:所有的日志相关的属性可以

Linux环境下Oracle安装参数设置方法详解

前面讲了虚拟机的设置和OracleLinux的安装,接下来我们来说下Oracle安装前的准备工作. 1.系统信息查看 系统信息查看 首先服务器ip:192.168.8.120 服务器系统:Oracle Linux Server release 6.5 服务器主机名:oracle-learn 查看磁盘空间情况: [root@oracle-learn ~]# df -h Filesystem Size Used Avail Use% Mounted on /dev/sda1 32G 4.8G 26G