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

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

gitee源代码地址

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

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

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

gitee源代码地址

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

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

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

1、运行出现下面警告

出现警告 The CJS build of Vite's Node API is deprecated.

解决办法可以在

package.json 添加 "type": "module"

2、出现下面的错误

ReferenceError: defineOptions is not defined

好像不支持defineOptions

vue3 defineOptions使用,需要注意

项目推荐依赖:

javascript 复制代码
vue@^3.3
volar / vue-tsc@^1.6.4
vite@^4.3.5
@vitejs/plugin-vue@^4.2.0
vue-loader@^17.1.0 (if using webpack or vue-cli)

所以有些组件需要进行升级

3、出现下面错误

No known conditions for "./lib/locale/lang/zh-cn" specifier in "element-plus" package

import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言

上面修改成如下:

import locale from 'element-plus/es/locale/lang/zh-cn'; // 中文语言

4、主页显示charts图的时候出现下面错误

javascript 复制代码
Vue warn]: Failed to resolve component: BarChart
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Dashboard onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/index" > 
  at <KeepAlive include= [] > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition enter-active-class="animate__animated animate__fadeIn" mode="out-in" > 
  at <RouterView> 
  at <AppMain> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <ElConfigProvider locale= {name: 'zh-cn', el: {...}}el: {colorpicker: {...}, datepicker: {...}, select: {...}, cascader: {...}, pagination: {...}, ...}name: "zh-cn"[[Prototype]]: Object size="default" > 
  at <App>

变成显示如下了:

5、需要在vite.config.ts引入下面包,因为是用unplugin-vue-components 是由 Vue官方人员开发的一款自动引入插件,可以省去比如 UI 库的大量 import 语句

javascript 复制代码
import vue from "@vitejs/plugin-vue";
import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import vueJsx from "@vitejs/plugin-vue-jsx";

import UnoCSS from "unocss/vite";
import { resolve } from "path";
const pathSrc = resolve(__dirname, "src");
javascript 复制代码
plugins: [
      vue(),
      // MOCK 服务,开启 MOCK 放开注释即可
      // mockDevServerPlugin(),
      vueJsx(),
      UnoCSS({
        hmrTopLevelAwait: false,
      }),
      // 自动导入参考: https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
      AutoImport({
        // 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
        imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
        // 自动导入 Element Plus 相关函数,如:ElMessage, ElMessageBox... (带样式)
        resolvers: [ElementPlusResolver(), IconsResolver({})],
        eslintrc: {
          enabled: false,
          filepath: "./.eslintrc-auto-import.json",
          globalsPropValue: true,
        },
        vueTemplate: true,
        // 配置文件生成位置(false:关闭自动生成)
        dts: false,
        // dts: "src/typings/auto-imports.d.ts",
      }),

      Components({
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({ enabledCollections: ["ep"] }),
        ],
        // 指定自定义组件位置(默认:src/components)
        dirs: ["src/components", "src/**/components"],
        // 配置文件位置 (false:关闭自动生成)
        dts: false,
        // dts: "src/typings/components.d.ts",
      }),

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

6、重新运行后出现下面界面了

相关推荐
我要洋人死几秒前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人12 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人13 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR18 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香20 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969323 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai28 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91537 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#