一、背景

從 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. 我們在升級遷移項目中遇到問題，還是要深入分析源碼，能幫助我們理解底層原理和快速定位解決問題。