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

一、背景

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

二、排查过程

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

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

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

javascript 复制代码
"looseToNumber" is not exported by "../../../../../../Users/wanzhou/Documents/HBuilderProjects/xiaovie_uni/node_modules/.pnpm/registry.npmmirror.com+@[email protected]/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. 我们在升级迁移项目中遇到问题,还是要深入分析源码,能帮助我们理解底层原理和快速定位解决问题。

相关推荐
yede44 分钟前
微信小程序 - 获取权限
微信小程序·uni-app
黑马源码库miui520861 小时前
心理咨询法律咨询预约咨询微信小程序系统源码独立部署
微信小程序·小程序·uni-app·php·微信公众平台
页面魔术2 小时前
[译]专访尤雨溪: 2025年有什么计划?
前端·vue.js·vite
用户74054639943094 小时前
Vite开发服务器遇到大量依赖需要优化导致重启的问题
vite
前端与小赵9 小时前
webpack和vite之间的区别
前端·webpack·vite
黑金IT9 小时前
借助FastAdmin和uniapp,高效搭建AI智能平台
人工智能·uni-app·php
给钱,谢谢!20 小时前
记录vite引入sass预编译报错error during build: [vite:css] [sass] Undefined variable.问题
前端·css·sass·vite
狂团商城小师妹21 小时前
经销商订货管理系统小程序PHP+uniapp
微信·微信小程序·小程序·uni-app·php·微信公众平台
Bingo_BIG1 天前
uni-app自动升级功能
前端·javascript·uni-app·移动端开发