更多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使用，需要注意
項目推薦依賴：
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.tsAutoImport({// 自動導入 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、重新運行后出現下面界面了
