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

news/2025/1/14 21:47:35/

一、背景

从 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.ppmy.cn/news/1363922.html

相关文章

280.【华为OD机试真题】高效货运(贪心算法—JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-高效货运二.解题思路三.题解代码Python题解代码…

MySQL的SQL语句

1.MySQL连接 连接命令一般是这样写的 mysql -h$ip -P$port -u$user -p比如:mysql -h127.0.0.1 -P3306 -uroot -p -h 指定连接的主机地址;-P 指定连接端口号;-u 指定用户名 -p指定用户名密码 2.SQL分类 DDL(Data Definition Language) 数据定义语言&…

项目:shell实现多级菜单脚本编写

目录 1. 提示 2. 演示效果 2.1. 一级菜单 2.2. 二级菜单 2.3. 执行操作 3. 参考代码 1. 提示 本脚本主要实现多级菜单效果,并没有安装LAMP、LNMP环境,如果要用在实际生成环境中部署LNMP、LAMP环境,只需要简单修改一下就可以了。 2. 演…

NLP 使用Word2vec实现文本分类

🍨 本文为[🔗365天深度学习训练营学习记录博客 🍦 参考文章:365天深度学习训练营 🍖 原作者:[K同学啊 | 接辅导、项目定制]\n🚀 文章来源:[K同学的学习圈子](https://www.yuque.com/…

腾讯云主机Ubuntu22.04安装Odoo17

一、安装PostgreSQL16 参见之前的文章 Ubuntu22.04安装PostgreSQL-CSDN博客 二、安装Odoo17 本方案使用的nightly版的odoo,安装的都是最新版odoo wget -O - https://nightly.odoo.com/odoo.key | apt-key add - echo "deb http://nightly.odoo.com/17.0/n…

【PyG】PyG中的Cora数据集

Cora数据集简介 以下内容引用自https://blog.csdn.net/yeziand01/article/details/93374216。 Cora数据集共包含2708个样本点,每个样本点的特征向量长度为1433。每个样本点都是一篇科学论文,样本点总共有7个类别。 每篇论文的特征向量长度为1433&…

let和const命令

1.let命令 基本用法 ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 { let a 10; var b 1; } a//报错:a is not defined b//1 上面代码在代码块中,分别用let和var声明…

基于YOLOv8深度学习+Pyqt5的电动车头盔佩戴检测系统

wx供重浩:创享日记 对话框发送:225头盔 获取完整源码源文件已标注的数据集(1463张)源码各文件说明配置跑通说明文档 若需要一对一远程操作在你电脑跑通,有偿89yuan 效果展示 基于YOLOv8深度学习PyQT5的电动车头盔佩戴检…