ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)

简介: ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)

5 篇文章0 订阅

订阅专栏

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址: http://218.75.87.38:9666

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888

7、修正图标显示问题,就是下面图标插件使用的svg指定自己的icons的svg目录,有需要新的可以到相应网站进行下载,如Iconify Design: All popular icon sets, one framework.

createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [resolve(pathSrc, "assets/icons/svg")],
        // 指定symbolId格式
        symbolId: "icon-[dir]-[name]",
      }),

8、有组件升级后出现下面问题,目前还不知道是什么原因

at async ModuleLoader.import (node:internal/modules/esm/loader:336:24) {
  [cause]: Error: Cannot find module 'F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\@rollup\rollup-win32-x64-msvc\rollup.win32-x64-msvc.node'. Please verify that the package.json has a valid "main" entry
      at tryPackage (node:internal/modules/cjs/loader:437:19)
      at Module._findPath (node:internal/modules/cjs/loader:705:18)
      at Module._resolveFilename (node:internal/modules/cjs/loader:1120:27)
      at Module._load (node:internal/modules/cjs/loader:975:27)
      at Module.require (node:internal/modules/cjs/loader:1225:19)
      at require (node:internal/modules/helpers:177:18)
      at requireWithFriendlyError (F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\rollup\dist\native.js:69:10)
      at Object.<anonymous> (F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\rollup\dist\native.js:96:76)
    path: 'F:\\codestudy\\nbcio-oa\\plus\\ruoyi-nbcio-vue3\\node_modules\\@rollup\\rollup-win32-x64-msvc\\package.json',
    requestPath: '@rollup/rollup-win32-x64-msvc'

9、出现下面的错误

主要是下面插件要升级一下

"unplugin-auto-import": "^0.17.5",
    "unplugin-icons": "^0.18.5",
    "unplugin-vue-components": "^0.26.0",
failed to load config from F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\vite.config.ts
error when starting dev server:
Error: [auto-import] identifier toRef already defined with vue
    at F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\unplugin-auto-import\dist\chunk-HA63LRAS.cjs:250:17
    at Array.forEach (<anonymous>)
    at F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\unplugin-auto-import\dist\chunk-HA63LRAS.cjs:270:13
    at F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\node_modules\unplugin\dist\index.js:1605:32
    at F:\codestudy\nbcio-oa\plus\ruoyi-nbcio-vue3\vite.config.ts:109:32
    at loadConfigFromFile (file:///F:/codestudy/nbcio-oa/plus/ruoyi-nbcio-vue3/node_modules/vite/dist/node/chunks/dep-G-px366b.js:68040:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

10、出现下面的警告

也是升级一下unocss组件就可以

plugin 'unocss:transformers:pre' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'unocss:transformers:pre' uses deprecated 'transform' option. Use 'handler' option instead.
plugin 'unocss:global' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'unocss:global' uses deprecated 'transform' option. Use 'handler' option instead.
plugin 'unocss:transformers:default' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'unocss:transformers:default' uses deprecated 'transform' option. Use 'handler' option instead.
plugin 'unocss:transformers:post' uses deprecated 'enforce' option. Use 'order' option instead.

这次vue3组件升级与主页调整初步结束,结束后主页界面如下:


相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
164 2
|
20天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
78 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
28天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
36 1
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
2月前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
127 0
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
46 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。