Jenkins发布uniapp开发的H5遇到的问题

简介: Jenkins发布uniapp开发的H5遇到的问题

 image.gif编辑

目录

编辑

前言:

一、问题:        

二、解决经历:

       1、思路1(不成功):

      2、 思路2(成功):        

三、原因分析:

总结


前言:

      背景:由于历史原因,公司有个历史项目使用vue开发的公众号H5,原生开发的微信小程序。两端功能的完全一样,但是需要维护两个项目,最近客户提了需求需要修改部分功能,博主接到需求后,觉得维护两套代码不仅是重复开发,测试起来也麻烦,因为之前是两个人开发不同端的缘故,导致大部分的bug都是因为两端不一致产生的。为了节省时间和维护成本,提升开发测试效率,在反复对比调研,最终选择了uniapp技术框架融合两端进行重构。


一、问题:        

       公司使用Jenkins发布公众号H5,在使用uniapp之前,发布一直很稳定,更换uniapp后,发布公众号H5偶尔就会莫名的出现异常,搞得我和运维都很头疼,报错如下:

image.gif编辑


二、解决经历:

       异常抛出无法定位是前端问题还是运维部署的问题,一开始只能走常规的Jenkins报错搜索流程,但是这个很奇怪Jenkins发布正常,只是项目没办法运行,只有控制台上诉截图的错,所以根本就找不到对应的解决方案,只能继续在猜测是不是Jenkins这里是不是有问题。

      1、思路1(不成功):

       因为本地编译,本地打包发布都可以成功,后来猜测是不是本地的node版本跟Jenkins线上配置的node版本不对呢,于是我们进行了又一次的尝试,将本地的node版本修改到跟线上一样尝试排错,不试还好,一试吓一跳,试过之后本地打包也有问题了。还好之前做了一下备份,不然备用的发版方案都没有了...

     2、 思路2(成功):        

       再调整思路,本地调试发现报错的地方指向的位置用的 async+await ,于是就怀疑是不是node中解析ES6转ES5的babel插件版本有问题,因为我本地一直用的是yarn,这次尝试删除 node-modules,node 版本还是固定在 14,使用npm install,然后npm run serve试试,最后可以了.


三、原因分析:

       yarn install 报错的原因是因为 npm 和 yarn 安装依赖时合并策略不同,导致依赖版本与预期不同导致。

如果仍要通过 yarn 管理依赖,可修改项目根目录 package.json 中 devDeps 依赖 @babel/runtime 的版本为 ~7.17.9,并增加

···
"resolutions":{
"@babel/runtime": "~7.17.9"
}
···

image.gif

锁定该依赖版本。


总结

       问题发现到解决,一开始方向不对以为是Jenkins的问题,浪费了些精力,然后调整方向,一直到之后找到解决方案。虽然很曲折,但还是很开心。故记录一下。希望这个记录能帮到看到这篇文章的小伙伴。

image.gif编辑


相关文章
|
3月前
|
移动开发
Uniapp 多功能富文本编辑组件 可多端使用 H5插入
Uniapp 多功能富文本编辑组件 可多端使用 H5插入
33 0
|
1月前
|
Android开发 iOS开发 开发者
轻松实现 UniApp Xcode 上传 IPA 无需 Mac,appuploder 一键上传助你高效开发!
轻松实现 UniApp Xcode 上传 IPA 无需 Mac,appuploder 一键上传助你高效开发!
|
3月前
|
小程序 前端开发 API
一文就知道uniapp等跨端开发的使用场景,学习成本,如何快速使用,基本语法等
uniapp是一个跨平台开发各种各样应用的一套框架。只需要写一套代码,可以适配多达14种产品类型,比如H5移动端、微信小程序及各种其他小程序,ios、安卓等接近原生APP的应用(可以上架到App Store或应用商店)。所以这里的多端,指的并不是PC、平板、手机端,而是移动端优先,开发者可以一次编码,分别编译为小程序和 Android 以及 iOS 应用,实现多端开发
86 0
|
1月前
|
Java Android开发 开发者
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
36 3
|
1月前
|
缓存 数据可视化 小程序
uniapp项目中使用vue3开发多端项目实践
uniapp项目中使用vue3开发多端项目实践
20 0
|
1月前
|
Java 关系型数据库 MySQL
【项目】手把手带你用 SpringBoot、Uniapp、MySql 开发一个简单的活动报名项目
【项目】手把手带你用 SpringBoot、Uniapp、MySql 开发一个简单的活动报名项目
140 1
|
2月前
|
数据采集 机器学习/深度学习 移动开发
uniapp+springboot医院智能导诊系统源码,自动兼容小程序与H5版本
技术架构:Uniapp+springboot+redis+mybatis plus+mysql+RocketMQ
72 0
|
3月前
uniapp项目实践第二章:使用vscode开发uniapp项目
uniapp项目实践第二章:使用vscode开发uniapp项目
137 0
|
3月前
|
Android开发 iOS开发 开发者
uniapp开发App从开发到上架全过程
uniapp开发App从开发到上架全过程
36 0
|
3月前
|
Java Android开发 开发者
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
217 0

热门文章

最新文章