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

news/2024/5/20 0:50:15 标签: uni-app, 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.niftyadmin.cn/n/5388007.html

相关文章

婚恋交友系统源码-交友APP小程序H5开发-源码交付,支持二开-实名制交友更放心!

一、交友小程序开发的重要性 1. 满足人们的社交需求:交友小程序为人们提供了一个便捷的社交平台,使得人们可以随时随地地结识新朋友,拓展自己的社交圈子。 2. 丰富人们的业余生活:通过交友小程序,人们可以参加各种线…

OpenAI推出首个AI视频模型Sora:重塑视频创作与体验

链接:华为OD机考原题附代码 Sora - 探索AI视频模型的无限可能 随着人工智能技术的飞速发展,AI视频模型已成为科技领域的新热点。而在这个浪潮中,OpenAI推出的首个AI视频模型Sora,以其卓越的性能和前瞻性的技术,引领着…

R语言【geometry】——convhulln():计算包含一组点的最小穹顶

Package geometry version 0.4.7 Description 返回关于n维空间中输入点集合的最小凸复合体的信息(点的凸包)。默认情况下,返回形成穹顶面点的索引;可选择的法线到切面和一般表面积和体积可以返回。这个函数与Qhull库连接。 Usage convhulln(p,options …

【机器学习学习脉络】

机器学习学习脉络 基础知识 数学基础 线性代数概率论与数理统计微积分最优化理论 编程基础 Python编程语言数据结构与算法软件工程原则 计算机科学基础 操作系统网络通信数据库系统 机器学习概论 定义与发展历程机器学习的主要任务和应用领域基本术语和概念 监督学习 线…

高创新!EI论文复现:计及源荷随机特性的综合能源系统/热电联供型微网优化运行程序代码!

适用平台:MatlabYalmipCplex 程序针对由风光机组、燃料/光伏电池、余热锅炉、燃气锅炉、蓄电池以及电/热负荷构成的热电联供型微网/综合能源系统,考虑风电、光伏功率以及热、电负荷的随机性,应用机会约束规划理论建立经济运行优化模型&#…

chat GPT第一讲

计算机的语言奇迹:探秘ChatGPT的智能回答和写作能力 目前我们这个行业,最火的话题无疑是AI人工智能,类似ChatGPT这样的智能Ai,今天剩下的时间不多,每天一个主题,我给大家讲一下计算机回答问题和写作的能力,…

opencv图像处理(3)

1.图像平滑 1.1图像噪声 由于图像采集、处理、传输等过程不可避免的会受到噪声的污染,妨碍人们对图像理解及分析处理。常见的图像噪声有高斯噪声、椒盐噪声等。 1.1.1椒盐噪声 椒盐噪声也称为脉冲噪声,是图像中经常见到的一种噪声,它是一…

LayUI发送Ajax请求

页面初始化操作 var processData null $(function () {initView();initTable();// test(); })function initView() {layui.use([laydate, form], function () {var laydate layui.laydate;laydate.render({elem: #applyDateTimeRange,type: datetime,range: true});}); }初始…