更多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
一、下面的组件主要在vite.config.ts里配置
1、unplugin-auto-import插件
unplugin-auto-import 这个插件是为了解决在开发过程中的组件的导入问题，比如经常不清楚相对路径的问题，这个插件就是解决这个问题
这个插件可以配置在根目录生成一个auto-import.d.ts，这个文件会将所有的插件导入到global中，这样在使用的时候直接就可以使用了。
2、unplugin-vue-components 插件
使用 unplugin-vue-components 插件可以实现在开发过程中自动按需引入组件，减少打包体积
3、使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。
4、通过vite-plugin-svg-icons 使用SVG图片
5、Unocss(原子化css) 使用(vue3 + vite + ts)
相应的主要配置如下：
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"); //import createPlugins from './vite/plugins'; import path from 'path'; export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => { const env = loadEnv(mode, process.cwd()); return { // 部署生产环境和开发环境下的URL。 // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上 // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。 base: env.VITE_APP_CONTEXT_PATH, resolve: { alias: { '~': path.resolve(__dirname, './'), '@': path.resolve(__dirname, './src'), 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' }, extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] }, // https://cn.vitejs.dev/config/#resolve-extensions //plugins: createPlugins(env, command === 'build'), server: { host: '0.0.0.0', port: Number(env.VITE_APP_PORT), open: true, proxy: { [env.VITE_APP_BASE_API]: { target: 'http://localhost:9060', changeOrigin: true, rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '') } } }, css: { preprocessorOptions: { scss: { javascriptEnabled: true } }, postcss: { plugins: [ { postcssPlugin: 'internal:charset-removal', AtRule: { charset: (atRule) => { if (atRule.name === 'charset') { atRule.remove(); } } } } ] } }, 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/svg")], // 指定symbolId格式 symbolId: "icon-[dir]-[name]", }), ], // 预编译 optimizeDeps: { include: [ 'vue', 'vue-router', 'pinia', 'axios', '@vueuse/core', 'path-to-regexp', 'echarts', '@wangeditor/editor', '@wangeditor/editor-for-vue', 'vue-i18n', "path-browserify", '@vueup/vue-quill', '@/lib/vform/designer.umd.js', "element-plus/es/components/form/style/css", "element-plus/es/components/form-item/style/css", "element-plus/es/components/button/style/css", "element-plus/es/components/input/style/css", "element-plus/es/components/input-number/style/css", "element-plus/es/components/switch/style/css", "element-plus/es/components/upload/style/css", "element-plus/es/components/menu/style/css", "element-plus/es/components/col/style/css", "element-plus/es/components/icon/style/css", "element-plus/es/components/row/style/css", "element-plus/es/components/tag/style/css", "element-plus/es/components/dialog/style/css", "element-plus/es/components/loading/style/css", "element-plus/es/components/radio/style/css", "element-plus/es/components/radio-group/style/css", "element-plus/es/components/popover/style/css", "element-plus/es/components/scrollbar/style/css", "element-plus/es/components/tooltip/style/css", "element-plus/es/components/dropdown/style/css", "element-plus/es/components/dropdown-menu/style/css", "element-plus/es/components/dropdown-item/style/css", "element-plus/es/components/sub-menu/style/css", "element-plus/es/components/menu-item/style/css", "element-plus/es/components/divider/style/css", "element-plus/es/components/card/style/css", "element-plus/es/components/link/style/css", "element-plus/es/components/breadcrumb/style/css", "element-plus/es/components/breadcrumb-item/style/css", "element-plus/es/components/table/style/css", "element-plus/es/components/tree-select/style/css", "element-plus/es/components/table-column/style/css", "element-plus/es/components/select/style/css", "element-plus/es/components/option/style/css", "element-plus/es/components/pagination/style/css", "element-plus/es/components/tree/style/css", "element-plus/es/components/alert/style/css", "element-plus/es/components/radio-button/style/css", "element-plus/es/components/checkbox-group/style/css", "element-plus/es/components/checkbox/style/css", "element-plus/es/components/tabs/style/css", "element-plus/es/components/tab-pane/style/css", "element-plus/es/components/rate/style/css", "element-plus/es/components/date-picker/style/css", "element-plus/es/components/notification/style/css", "element-plus/es/components/image/style/css", "element-plus/es/components/statistic/style/css", "element-plus/es/components/watermark/style/css", "element-plus/es/components/config-provider/style/css", "element-plus/es/components/text/style/css", "element-plus/es/components/drawer/style/css", "element-plus/es/components/color-picker/style/css", ] }, build: { commonjsOptions: { include: /node_modules|lib/ //这里记得把lib目录加进来，否则生产打包会报错！！ } } }; });
