更多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
1、运行出现下面警告
出现警告 The CJS build of Vite‘s Node API is deprecated.
解决办法可以在
package.json 添加 "type": "module"
2、出现下面的错误
ReferenceError: defineOptions is not defined
好像不支持defineOptions
vue3 defineOptions使用，需要注意
项目推荐依赖：
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图的时候出现下面错误
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 语句
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");
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、重新运行后出现下面界面了
