记录解决uniapp使用uview-plus在vue3+vite+ts项目中打包后样式不能显示问题

一、背景

从 vue2+uview1 升级到 vue3+vite+ts+uview-plus ,uview组件样式打包后不显示,升级前uview 组件是可以正常显示,升级后本地运行是可以正常显示,但是打包发布成H5后uview的组件无法正常显示,其他uniapp自己的组件可以正常显示。折腾了很久,这里记录下我是如何解决的

二、排查过程

当然过程很痛苦,百度也未能找到这种类似的问题,各种排查和尝试。也一度以为是uview-plus框架本身的问题。

令人不解的是本地运行正常,就打包h5后运行就g了。

各种尝试和折腾后,真是束手无策了,于是又在Mac上试试看看是否环境或者node版本问题,换个环境连编译都通不过了直接报如下错误:

"looseToNumber" is not exported by "../../../../../../Users/wanzhou/Documents/HBuilderProjects/xiaovie_uni/node_modules/.pnpm/registry.npmmirror.com+@vue+shared@3.2.39/node_modules/@vue/shared/dist/shared.esm-bundler.js", imported by "node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js".
at ../../../../../Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js:1:203
import { extend, isArray, isMap, isIntegerKey, hasOwn, isSymbol, isObject, hasChanged, makeMap, capitalize, toRawType, def, isFunction, NOOP, isString, isPromise, getGlobalThis, EMPTY_OBJ, toHandlerKey, looseToNum...                                                                                                                                                                                                                
export { camelize, capitalize, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from '@vue/shared';
import { isRootHook, isRootImmediateHook, ON_LOAD, createRpx2Unit, defaultRpx2Unit } from '@dcloudio/uni-shared';
Build failed with errors.

三、发现问题

通过报错去查看源码,源码里的确没有 looseToNumber 这个家伙,我再想会不会因为有uniapp的js类库,没有走HBuilder自带的dcloudio类库而走的npm安装的类库的问题,仔细查看 package.json 文件里面有引入dcloudio类库,这里@dcloudio依赖我也是从其他Vue3+vite+ts项目迁移复制过来的当时没有去深入考虑。

于是乎,我把@开头的全部删掉,再删除node_modules,接着运行 pnpm install 重新安装并打包H5放nginx下运行,如有提示缺的@依赖再单独装一下,终于全部uview-plus组件正常显示了。

删除整理后的 package.json 依赖内容:

四、总结

1. 这里的Vue本地运行正常打包后样式无法正常显示,是由于用npm导入了一部分uniapp的@dcloudio类库,和HBuilder自带的@dcloudio一起用导致版本不一致导致的问题。

2. 我们在升级迁移项目中遇到问题,还是要深入分析源码,能帮助我们理解底层原理和快速定位解决问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/402812.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

指针笔试题(C语言进阶)

目录 前言 1、案例一 1.1 答案 1.2 解析 2、案例二 2.1 答案 2.2 解析 3、案例三 3.1 答案 3.2 解析 4、案例四 4.1 答案 4.2 解析 5、案例五 5.1 答案 5.2 解析 总结 前言 “纸上得来终觉浅,绝知此事要躬行”。本篇通过对指针实际案例的分析&…

Java基于SpringBoot的校园轻博客系统,附源码

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

NLP_构建GPT模型并完成文本生成任务

文章目录 搭建GPT模型(解码器)构建文本生成任务的数据集训练过程中的自回归文本生成中的自回归(贪婪搜索)完整代码小结 搭建GPT模型(解码器) GPT 只使用了 Transformer的解码器部分,其关键组件…

中医笔记(阴阳,五行,十二经脉,天干地支,子午流注,倪海厦中医笔记)

目录 一.阴阳1.1 什么是阴阳?1.2 作用1.3 阴阳理论在中医上的运用 二.五行2.1 五行之间的关系2.2 五行对应的力量2.3 原理: 三.天干地支四.子午流注十二经脉与子午流注之间的关系 五.十二经脉足太阳膀胱经 六.中医笔记小肠是火气化膀胱的水(如…

java效率为什么比c/c++慢,蓝桥杯上java只得50分,c++通过?

java效率为什么比c/c慢,蓝桥杯上java只得50分,c通过? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「c的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大…

车载测试,检测项目标准

检测项目: 二.GB/T 31486-2015电动汽车用动力蓄电池电性能要求及试验方法 说明:本标准规定了电动汽车用动力蓄电池(以下简称蓄电池)的 电性能要求、试验方法、检验规则。本标准适用于装载在电动汽车 上的锂离子蓄电池和金属氢化 物镍蓄电池单体和模块&a…

跟着pink老师前端入门教程(JavaScript)-day05

六、语句 (一)表达式和语句 1、表达式 表达式是可以被求值的代码,JavaScript 引擎会将其计算出一个结果。 2、语句 语句是一段可以执行的代码。 比如: prompt() 可以弹出一个输入框,还有 if语句 for 循环语句等…

创建型设计模式 - 原型设计模式 - JAVA

原型设计模式 一 .简介二. 案例三. 补充知识 前言 这是我在这个网站整理的笔记,有错误的地方请指出,关注我,接下来还会持续更新。 作者:神的孩子都在歌唱 一 .简介 原型模式提供了一种机制,可以将原始对象复制到新对象&#xff0…

Vue3_基础使用_3_Hooks模块化

今天主要学习的是hooks, vue3的使用比vue2方便很多了,但是呢各个功能块的逻辑有时候还是会缠绕在一起,这个时候使用hooks进行模块化管理开发,说白了就是将每个单独的业务放到自己的.ts中去写,以后修改就找到这个ts 不用到处去翻…

第三百六十一回

文章目录 1. 概念介绍2. 实现方法2.1 环绕效果2.2 立体效果 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义SlideImageSwitch组件"相关的内容,本章回中将介绍两种阴影效果.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…

HL小祭記0221

早上很好,浑身酸疼,像被人*了 上午将字符串 一言难尽 中午天有点小雨 炸金花 额 潇寞手麻了,好快啊! 靠开牌小赚一下 下午调题 动不动就一百行代码…… 小雨,中雨,大雨,电闪雷鸣 是不…

代码随想录算法训练营第58天 | 392.判断子序列 115.不同的子序列

判断子序列 这道题可以双指针方法解决。 class Solution { public:bool isSubsequence(string s, string t) {int s_index 0;for(int t_index 0; t_index < t.size(); t_index) {if(s[s_index] t[t_index]) {s_index;}}return s_index s.size();} };用动态规划也是可解…

Shader基础的简单实现(基于URP渲染)

一个模型是很多个顶点组成&#xff0c;顶点数据中包含坐标、法线、切线、UV坐标、顶点颜色等等组成。 URP(Universal Render Pipeline)通用渲染管线&#xff0c;是Unity在2019.3版本之后推出的一种新的渲染管线。传统的渲染管线在渲染多光源的情况&#xff0c;是把每一个主要光…

13款强大的开源API测试工具,不容错过!

使用SOA和微服务作为软件架构的趋势不断上升&#xff0c;催生了多种用于服务API自动化测试的工具。 API是应用程序接口&#xff08;application programming interface&#xff09;的缩写&#xff0c;是一套用于构建和集成应用软件的定义和协议&#xff0c;是两个或多个计算机…

2024新版Java高频面试题+Java八股文面试真题

Java面试题_2024新版Java高频面试题Java八股文面试真题 Java高频面试专题视频课程&#xff0c;瓤括了Java生态下的主流技术面试题&#xff0c;课程特色&#xff1a; 1、全面&#xff0c;jvm、并发编程、mysql、rabbitmq、spring、mybatis、redis、分布式、微服务、数据结构等等…

解决 ModuleNotFoundError: No module named ‘transformers‘

Traceback (most recent call last): File “start_cli_test.py”, line 2, in import transformers ModuleNotFoundError: No module named ‘transformers’ Traceback (most recent call last): File “/usr/local/python3/lib/python3.8/runpy.py”, line 185, in _run_m…

OpenCascade——BRepPrimAPI图元创建接口

OpenCascade BRepPrimAPI包提供了创建以下图元&#xff08;primitive&#xff09;的 API&#xff1a; 盒;锥体;柱体;棱镜。 可以创建部分实体&#xff0c;例如一定经度范围内的球体。在实际模型中&#xff0c;图元可用于轻松创建特定的子部件。 BRepPrimAPI也提供了扫掠方式…

鱼哥赠书活动第⑧期:《基础软件之路:企业级实践及开源之路》

鱼哥赠书活动第⑧期&#xff1a;《基础软件之路&#xff1a;企业级实践及开源之路》 作者介绍&#xff1a;1.静态分析工具在当前软件开发流程中的应用2.编译相关技术在静态分析工具中的应用3.编译相关技术在提升软件质量和性能上的更多应用4. 未来展望图书推荐&#xff1a;赠书…

Jest单元测试:玩转代码的小捉迷藏!

嗨&#xff0c;码农小伙伴们&#xff01;在这个金秋十月&#xff0c;国庆与中秋重叠&#xff0c;我们有一个特殊的任务——通过 Jest 单元测试&#xff0c;找到代码的神秘“中秋蛋糕”&#xff01;这是一个简单又有趣的冒险&#xff0c;就像在中秋晚会上找月亮一样容易。让我们…

springboot208基于springboot物流管理系统

基于spring boot物流管理系统设计与实现 摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。…