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

原创已于 2024-04-27 14:34:58 修改 · 1.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ruoyi-nbcio #vue.js

于 2024-03-05 09:21:58 首次发布

ruoyi-nbcio 同时被 3 个专栏收录

154 篇文章

订阅专栏

前端vue

145 篇文章

订阅专栏

nodejs

5 篇文章

订阅专栏

本文描述了在升级Vue3组件时遇到的问题，如图标插件SVG目录设置、模块加载失败、配置文件错误以及unocss组件的警告。文章提供了相应的解决方法，如修正图标路径和更新依赖的插件版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多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组件升级与主页调整初步结束，结束后主页界面如下：