pnpm补丁文件夹替换之后2023年新报错:
failed to resolve import "@jiaminghi/color/src" from "node_modules\.pnpm\@jiaminghi+datav-view@2.10.0\node_modules\@jiaminghi\data-view\lib\components\decoration9\src\main.vue". does the file exist?
解决方案:
找到项目目录node_modules\.pnpm\@jiaminghi+color@开头的文件夹,补丁内的版本是@jiaminghi+color@0.1.1的,将@jiaminghi+color@0.1.1文件夹覆盖到@jiaminghi+color@1.1.3 (后续原作者可能还会更新,最新版本号可以去https://github.com/jiaming743/Color查看)即可。
最近在制作一个企业大屏,需要一些大屏的插件,然后就找到了一款组件,jiaminghi的data-view,它的边框是我首先较为喜欢的,调用也很简单,一两句简单的html就能完成了,美中不足的是它原生态是支持vue-cli的webpack打包工具,不支持vite,直接引入包,项目会出错的,不过经过站长一周的改造,效果还是蛮可以的,调用的图表组件均加入deep,可以通过API接口动态修改图表数据,官网给的状态更新教程也是针对vue-cli的,虽然比较耗费资源,不过deep还是个不错的解决方案。随带还解决了Uncaught SyntaxError: The requested module '/node_modules/@jiaminghi/bezier-curve/lib/index.js?v=1dc9a735' does not provide an export named 'default'跟vite require is not defined的两个问题,不过类似动态环图跟水位图这些效果,全屏跟退出全屏时可能会错位,展示还是通过iframe来实现屏幕自适应的效果。最后还是夸一夸vite的run dev速度跟打包速度,vue-cli真心没法比,后续希望原作者也能出一个vite版本的dataV。
目前站长做了npm\cnpm\pnpm的三个兼容版本(目前兼容vite>=2.8.2+vue3(vite+vue2版本兼容包请联系站长)+windows/macos,yarn、npm、pnpm可通用,就是node_modules底层文件位置不一样,找到了自行替换就行了,有需要的请联系站长,站长有时间会整理好放上去的,其实修改原来都差不多,下过来稍微研究下相信大家都能改造),cnpm版本下载地址https://download.csdn.net/download/hehu158/81842518,pnpm版本下载地址https://download.csdn.net/download/hehu158/85005243,npm版本/yarn版本通用(支持windows跟macos)下载地址https://download.csdn.net/download/hehu158/85008259,有兴趣的小伙伴可以下载过来研究下的,然后通过patch-package来定制自己的node_modules依赖补丁包(自行度娘下哈,非常简单的操作),这样就npm install的时候就可以自行替换了,项目重装依赖的时候就不用手动去复制粘贴了,这样团队内分享项目也会比较轻松。
2023.04.14 npm/yarn的项目关于patch-package的简单说明,这里拿npm做下说明:
①安装patch-package,固定@jiaminghi/color版本为0.1.1,这一步很关键,我的补丁是基于0.1.1版本修改过来的
npm i patch-package
npm i @jiaminghi/color@0.1.1
②下载补丁覆盖压缩包文件夹到node_modules
③生成patch-package补丁
npx patch-package @jiaminghi/c-render
npx patch-package @jiaminghi/charts
npx patch-package @jiaminghi/color
npx patch-package @jiaminghi/data-view
④package.json中script添加"postinstall":"patch-package"
⑤通过git分享给项目中的其他成员,后续通过npm i即可,无需手动复制粘贴补丁文件夹
默认新装报错1:
[plugin:vite:vue]
/node_modules/@jiaminghi/data-view/lib/components/decoration6/src/main.vue:8:11
6 | >
7 | <rect
8 | :key="i"
| ^
9 | :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
10 | :x="point[0] - halfRectWidth"
默认报错2:
The requested module '/node_modules/@jiaminghi/c-render/lib/index.js?v=66938fb6' does not provide an export named 'default
热门文章
dataV是个不错的选择,就是原生支持vue-cli的webpack打包工具,不支持vite,不过站长还算完美地解决了这个问题。
本文主要分析下子组件如何调用父组件的变量跟函数。
vue使用font-spider压缩字体文件的爬坑记录
vue3下快速获取网址中的url参数,网上基本上都是vue2的,所以站长整理了下解决方案
mui轮播还是ok的,循环轮播就不行了哈,通过简单的JavaScript代码完善下就解决
pnpm跟360有冲突,我也是第一次见识。
three.js一个js三维模型库,陌生是挺陌生的,不过学习的话,我们还是要从官网开始,别随便拿别人的代码套。
让electron支持vite2,非常不错,让vue3跑mqtt,十分完美的组合,还支持cnpm。
vite2 vue3 兼容库包,站长用完才能偷偷告诉你。
整理vue公共函数,放置到main.js,在main.js设置全局变量,实现main.js跟.vue文件间的数据通信。