前言:
根据项目需要,领导要求,微信小程序搞完了一半的代码迁移为uniapp代码,目前使用uniapp开发体验还不错。但是问题还是会有一些,比如这次大坑。。。
uniapp 使用vue3+vite+ts 组件 vk-uview-ui 状态管理 pinia
当前是项目基本的业务在uniapp中已经开发完成,开发联调基本都是 dev:h5 之后在chrome进行。问题就是出在微信小程序的打包验证过程中,npm run build:wp-weixin 之后,微信小程序工具加载发现ui组件样式丢失,功能失效。其他同事windows系统没这个问题。当时怀疑是系统中某个环境的版本有问题,比如UI组件或者构建工具版本。
当时恰好build小程序的时候,命令行中提示有新版本,让执行 npx @dcloudio/uvm alpha 升级。基于以上情况综合考虑,执行 npx @dcloudio/uvm alpha 命令进行升级,发现并未解决问题。删除依赖以及使用其他方式构建依然没有见好。再返回来使用 dev:h5跑项目,启动成功,但是chrome控制台直接报错
Uncaught SyntaxError: The requested module '/webapp/node_modules/vue-demi/lib/index.mjs?v=561800fd' does not provide an export named 'hasInjectionContext' (at pinia.mjs:6:10)
尝试使用hbuilderx工具 运行->运行到浏览器->chrome 一样报错。
You installed esbuild for another platform than the one you're currently using. This won't work because esbuild is written with native code and needs to install a platform-specific binary executable.
Specifically the "@esbuild/darwin-arm64" package is present but this platform needs the "@esbuild/darwin-x64" package instead. People often get into this situation by installing esbuild with npm running inside of Rosetta 2 and then trying to use it with node running outside of Rosetta 2, or vice versa (Rosetta 2 is Apple's on-the-fly x86_64-to-arm64 translation service).
If you are installing with npm, you can try ensuring that both npm and node are not running under Rosetta 2 and then reinstalling esbuild. This likely involves changing how you installed npm and/or node. For example, installing node with the universal installer here should work: <https://nodejs.org/en/download/.> Or you could consider using yarn instead of npm which has built-in support for installing a package on multiple platforms simultaneously.
If you are installing with yarn, you can try listing both "arm64" and "x64" in your ".yarnrc.yml" file using the "supportedArchitectures" feature: <https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures> Keep in mind that this means multiple copies of esbuild will be present.
Another alternative is to use the "esbuild-wasm" package instead, which works the same way on all platforms. But it comes with a heavy performance cost and can sometimes be 10x slower than the "esbuild" package, so you may also not want to do that.
又经过一番尝试,还是没法正常运行。build以及dev之后dist目录也不会生成工程。
至此,本机项目算是炸了。
===
后续排查思路首先考虑问题是因为执行 npx @dcloudio/uvm alpha 导致的,是不是因为版本不对导致的。所以网上各种搜重装方法,然后并没有发现什么相关文章有说。后来找到 官网介绍,可以指定版本,改回稳定版之后并没有解决问题。
尝试重装hbuilderx,问题还在。
然后继续排除,因为当天调试微信端改了很多代码,怀疑是不是因为一些新加的代码导致。然后就新拉分支,版本使用早上修改之前的代码,还是不行。
因为中间多次删除了node_modules包,然后怀疑是不是安装工具不对,就又使用yarn pnpm 等轮换安装依赖。还是没有解决问题。
加了官方群问了下,也没有回复。
后来调整思路,针对chrome控制台报错下手,找到这个文章 ask.dcloud.net.cn/question/16… ,基本情况一致,但是看了下自己配置 "pinia": "^2.0.36", 感觉没什么问题。后来又兜兜转转又搜到这个文章,想了下就在 package-lock.json 里面搜了下,发现版本是引用的是 2.1.16。之后就改配置为 "pinia": "2.0.36", 重新下载依赖,run dev:h5再看,web项目正常启动。run build:mp-weixin ,项目正常运行,UI组件库样式也正常显示,功能正常响应。
到这儿,本机uniapp项目算是又挺过来了。中间一度想重装电脑,因为压根没有想到问题是出在pinia版本上面。因为 运行了 npx @dcloudio/uvm alpha 命令,让本来没问题的代码莫名奇妙出现这种奇怪兼容性问题,也真的是搞心态。微信小程序中UI组件失效这个问题,出问题的莫名其妙,好的也是莫名其妙。
最后只能说 uniapp的盆友也是真行,在这儿只想给你们个建议。脚手架升级这种事情,还是别放到构建命令里面来建议升级了,不然像我这本来好好能跑的项目,让你们这么莫名其妙搞一下,信任度就这么崩塌了。