uni-app摒弃Hbuilder，使用cli配合jenkins来一键部署

bgColor
5,556 阅读2分钟

1.前言

近期公司打包上线都需要使用jenkins部署，之前老的打包方式复杂而且容易出错，所以需要将部署全部交给jenkin来处理。 项目是vue2，vue3的都可以通过cli方式，在jenkins通过脚本来执行部署，但有uni-app的框架都是用Hbuilder打包，打完包再压缩，改名上传。所以改造开始。

2.看官网

安装cli4系列的版本，高版本会出现无法理解的错误，我在版本上浪费了大量的时间

npm install -g @vue/cli@4

一步一步来，安装

vue create -p dcloudio/uni-preset-vue uni-vue-app

等待，选择Hellow uni-app

image.png

继续等待，然后就可以看到文件夹了

image.png

3.更换文件

将src里面的文件清空，到需要更改的项目，将里面除去git相关，nodemodules。然后全部放到新壳的src中

image.png

然后开始npm install， 中间可能会出现node-sass问题，是vue，node，等等版本问题，试试删除重新安装。 安装完之后，可以开始npm run serve 跑起你的服务了。

4.区分环境

一般我们开发会有多个环境，也就有不同的请求地址，vue-cli提供的process.env.NODE_ENV可以来直接获取，初始有三种环境 development production test 三个，在你的请求拦截器中区分吧。

image.png

5.区分打包环境

package.json中脚手架已经初始化了很多了，但是我们开发有一套规范，用于在jenkins中的脚本，所以需要改造一些构建命令

image.png

我们现在只需使用H5，所以UNI_PLATFORM选择H5做处理就好 根据不同的命令行打出不同环境的包 image.png

6.更改构建完的目录结构

脚手架默认打包输出的目录结构

image.png

这种显然不是我们想要的结构，这里也并不能够像vue项目那样可以在vue.config,js中写

module.exports = {
  publicPath:'/',
  indexPath: 'index.html',
  outputDir: process.env.VUE_APP_BASE_OUTPUTDIR,
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
}

需要在package.json打包命令中加入UNI_OUTPUT_DIR=xxx\xxxx\xxx就可以输出想要的目录结构了

image.png

7.配置jenkins

这里主要是记录接入，就不从头说安装jenkins、创建项目、基本结构等操作了。

看配置 image.png 这里就是刚改造的打包命令

image.png

一般我们在构建时执行一个shell脚本，配合docker来完成构建包的替换更改 在uniapp项目中先创建一个Dockerfile文件，然后里面的from 对应jenkins中image镜像地址

image.png

image.png

8.执行打包命令查看是否成功

查看构建结果是success,也有了docker 的小鲸鱼

image.png image.png

9.OVER

至此，就完成了uniapp的换壳和接入jenkins了。

avatar
文章
阅读
粉丝