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、重新运行后出现下面界面了

相关推荐
星星会笑滴2 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
彭世瑜22 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40423 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish24 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five25 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序25 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54126 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.26 分钟前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普27 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省27 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript