记录解决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. 我们在升级迁移项目中遇到问题,还是要深入分析源码,能帮助我们理解底层原理和快速定位解决问题。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PacketSender-用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序

PacketSender-用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序 PacketSender是一款开源的用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序,作者为dannagle。 其官网地址为:https://packetsender.com/,Github源代码地址:htt…

Kubernetes kubeadm 证书到期,更新证书

1.环境说明 lient Version: version.Info{Major:"1", Minor:"19", GitVersion:"v1.19.6", GitCommit:"fbf646b339dc52336b55d8ec85c181981b86331a", GitTreeState:"clean", BuildDate:"2020-12-18T12:09:30Z", G…

糖尿病性视网膜病变(DR)的自动化检测和分期

糖尿病性视网膜病变(DR)的自动化检测和分期 提出背景DR的阶段及其特征 历年解法计算机视觉方法多分类方法 新的解法深度学习方法迁移学习大模型多模型集成全流程分析 总结特征1:图像分割特征2:疾病分级特征3:治疗建议生…

phaseDNN文章解读

文章DOI: https://doi.org/10.48550/arXiv.1905.01389 作者是 Southern Methodist University 的Wei Cai 教授 A Parallel Phase Shift Deep Neural Network for Adaptive Wideband Learning 一种并行移相深度神经网络来自适应学习宽带频率信号 20190514 核心思想:…

搞明白Eclipse的Java Build Path很重要

为什么说搞懂Eclipse的Java Build Path很重要呢?因为搞懂了它才知道eclipse如何放置源代码和输出文件的,也就是搞懂从哪里来到哪里去的问题。 Build Path是指定Java工程所包含的资源属性集合。 在一个成熟的Java工程中,不仅仅有自己编写的源…

数字之美:探索人工智能绘画的奇妙世界

目录 引言AI绘画的定义与发展历程定义与发展历程AI绘画产品有哪些? AI绘画的应用领域设计与创意产业影视与游戏制作数字艺术与展览 AI绘画的基本原理与技术深度学习与神经网络生成对抗网络(GAN)风格迁移算法 AI绘画效果展示一只带着墨镜的小猫在高楼林立…

openGauss学习笔记-226 openGauss性能调优-系统调优-配置LLVM-LLVM适用场景与限制

文章目录 openGauss学习笔记-226 openGauss性能调优-系统调优-配置LLVM-LLVM适用场景与限制226.1 适用场景226.2 非适用场景 openGauss学习笔记-226 openGauss性能调优-系统调优-配置LLVM-LLVM适用场景与限制 226.1 适用场景 支持LLVM的表达式 查询语句中存在以下的表达式支持…

☀️将大华摄像头画面接入Unity 【2】配置Unity接监控画面

一、前言 上一篇咱们将大华摄像头接入到电脑上了,接下来准备接入到unity画面。 接入到监控就涉及到各种视频流的格式rtsp、rtmp、m3u8。 Unity里有一些播放视频流的插件,主要的就是AVPro Video 和 UMP等,这次我用的是UMP 最好使用2.0.3版本…

HAL STM32 HW I2C DMA + SSD1306/SH1106驱动示例

HAL STM32 HW I2C DMA SSD1306/SH1106驱动示例 📍硬件I2C DMA驱动参考:https://blog.csdn.net/weixin_45065888/article/details/118225993 📌github上的相关项目:https://github.com/taburyak/STM32_OLED_SSD1306_HAL_DMA &am…

使用单一ASM-HEMT模型实现从X波段到Ka波段精确的GaN HEMT非线性仿真

来源:Accurate Nonlinear GaN HEMT Simulations from X- to Ka-Band using a Single ASM-HEMT Model 摘要:本文首次研究了ASM-HEMT模型在宽频带范围内的大信号准确性。在10、20和30 GHz的频率下,通过测量和模拟功率扫描进行了比较。在相同的频…

【进程概念】

目录 什么是在计算机运行的程序这么多运行的程序计算机是如何管理的先描述再组织 什么是在计算机运行的程序 对于一个在磁盘可执行的二进制文件,也可叫做可执行程序。对于一个可执行的程序,程序有自己的代码和数据。一旦运行起来,就会在计算…

【无标题】学习Markdown

https://shadows.brumm.af 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些…