关于SpringBlade前端UI项目3.x版本路由懒加载和keep-alive三级路由缓存失效优化方案 　　 SpringBlade前端UI项目在使用过程中发现路由并没有懒加载，项目登录成功后所有的资源文件会全部加载，随着项目功能越来越多，首次加载的资源也会越来越多，会造成性能问题。目前最突出的一个问题就是，重新刷新页面，页面会出现空白，随着项目越大，这个空白时间会越长。基于上面说的问题，我对 /src/router/avue-router.js 文件进行了优化，以下是完整代码。import website from '@/config/website' const modules = import.meta.glob('../**/**/*.vue') // 优化路由懒加载核心代码 const loadPageNotFound = () => { return () => import('@/components/error-page/404.vue') } const loadView = (view) => { let res = null for (const path in modules) { if (path.indexOf(view) !== -1) { res = () => modules[path]() return res } } return res } function isURL (s) { return /^http[s]?:\/\/.*/.test(s) } let RouterPlugin = function () { this.$router = null; this.$store = null; } RouterPlugin.install = function (option = {}) { this.$router = option.router; this.$store = option.store; let i18n = option.i18n.global this.$router.$avueRouter = { safe: this, // 设置标题 setTitle: (title) => { const defaultTitle = i18n.t('title'); title = title ? `${title} | ${defaultTitle}` : defaultTitle; document.title = title; }, closeTag: (value) => { let tag = value || this.$store.getters.tag; if (typeof value === 'string') { tag = this.$store.getters.tagList.find(ele => ele.fullPath === value) } this.$store.commit('DEL_TAG', tag) }, generateTitle: (item, props = {}) => { let query = item[props.query || 'query'] || {} let title = query.name || item[props.label || 'label'] let meta = item[props.meta || 'meta'] || {} let key = meta.i18n if (key) { const hasKey = i18n.te('route.' + key) if (hasKey) return i18n.t('route.' + key) } return title.split(',')[0]; }, //动态路由 formatRoutes: function (aMenu = [], first) { const aRouter = [] const propsDefault = website.menu if (aMenu && aMenu.length === 0) return; for (let i = 0; i < aMenu.length; i++) { const oMenu = aMenu[i]; let path = oMenu[propsDefault.path], component = oMenu.component, name = oMenu[propsDefault.label] + ',' + oMenu.id, icon = oMenu[propsDefault.icon], children = oMenu[propsDefault.children], query = oMenu[propsDefault.query], meta = oMenu[propsDefault.meta]; if (option.keepAlive) { meta.keepAlive = option.keepAlive } const isChild = !!(children && children.length !== 0); const oRouter = { path: path, component: (() => { // 判断是否为首路由 if (first) { return loadView(option.store.getters.isMacOs ? '/page/index/layout.vue' : '/page/index/index.vue') // 判断是否为多层路由 } else if (isChild && !first) { return loadView('/page/index/layout.vue') // 判断是否为最终的页面视图 } else { let result = loadView(component + '.vue') return result || loadPageNotFound() } })(), name, icon, meta, query, redirect: (() => { if (!isChild && first) return `${path}` else return ''; })(), // 处理是否为一级路由 children: !isChild ? (() => { if (first) { oMenu[propsDefault.path] = `${path}`; let result = loadView(component + '.vue') return [{ component: result || loadPageNotFound(), icon: icon, name: name, meta: meta, query: query, path: '' }] } return []; })() : (() => { return this.formatRoutes(children, false) })() } if (!isURL(path)) aRouter.push(oRouter) } if (first) { aRouter.forEach((ele) => this.safe.$router.addRoute(ele)) } else { return aRouter } } } } export const formatPath = (ele, first) => { const propsDefault = website.menu; const icon = ele[propsDefault.icon]; ele[propsDefault.icon] = !icon ? propsDefault.iconDefault : icon; ele.meta = ele.meta || {} const iframeComponent = 'components/iframe/main'; const iframeSrc = (href) => { return href.replace(/&/g, "#") } const isChild = !!(ele[propsDefault.children] && ele[propsDefault.children].length !== 0); if (!isChild && first) { ele.component = 'views' + ele[propsDefault.path] if (isURL(ele[propsDefault.href])) { let href = ele[propsDefault.href] ele.component = iframeComponent ele[propsDefault.query] = { url: iframeSrc(href) } } } else { ele[propsDefault.children] && ele[propsDefault.children].forEach(child => { child.component = 'views' + child[propsDefault.path] if (isURL(child[propsDefault.href])) { let href = child[propsDefault.href] child[propsDefault.path] = ele[propsDefault.path] + '/' + child.code child.component = iframeComponent child[propsDefault.query] = { url: iframeSrc(href) } } formatPath(child); }) } } export default RouterPlugin;keep-alive 三级菜单失效解决方案，可在 /src/permission.js 文件中修改，以下是代码片段。router.beforeEach((to, from, next) => { const meta = to.meta || {}; const isMenu = meta.menu === undefined ? to.query.menu : meta.menu; store.commit('SET_IS_MENU', isMenu === undefined); if (getToken()) { // 三级菜单组件无法缓存问题 if (to.matched && to.matched.length > 2) { to.matched.splice(1, to.matched.length - 2) } ......以上就是SpringBlade前端UI项目3.x版本优化的具体方案。

前端项目构建产物在本地运行，如何解决接口跨域问题？ 　　如果你无法修改后端，但可以控制前端，可以通过一个中间层代理服务器来解决跨域问题。例如，你可以使用一个 Node.js 服务器作为代理来转发请求。　　你可以使用 http-proxy-middleware 代理请求，设置一个简单的 Node.js 服务器，将 API 请求代理到后端，避免浏览器的跨域限制。安装 http-proxy-middleware和express：npm install http-proxy-middleware express创建一个 server.js 文件：const express = require('express'); const path = require('path'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); // 处理静态文件 app.use(express.static(path.join(__dirname, 'dist'))); // 假设后端 API 地址是 http://backend-api:3000 app.use('/api', createProxyMiddleware({ target: 'http://backend-server.com/api', changeOrigin: true, // pathRewrite: { '^/api': '' }, // 可选，去掉请求中的 /api 部分 })); // 为了支持 Vue 的 Hash 模式，返回 index.html 来处理所有路由 app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist', 'index.html')); }); const port = 3000; app.listen(port, () => { console.log(`Server is running on http://localhost:${port}`); });启动 Node.js 服务器node server.js　　这样，当你访问 http://localhost:3000/api/... 时，所有的请求会被代理到后端服务器 http://backend-server.com/...。同时，前端的静态文件会从 dist 文件夹中提供。

vue3 + element-plus 设置表格自动滚动 　　前两天一朋友问我，说element-plus的table表单自动滚动会出现卡顿的问题，估计是没有使用requestAnimationFrame（请求动画帧）导致肉眼可见的卡顿。于是，我整理了下他的需求，给他写了一个demo，具体代码如下：<template> <div> <!-- 设置表格高度，确保有足够的空间显示滚动条 --> <el-table :data="tableData" style="width: 100%; height: 300px;" ref="tableRef" > <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="Name" prop="name"></el-table-column> <el-table-column label="Age" prop="age"></el-table-column> </el-table> <el-button @click="startScrolling">Start Scrolling</el-button> <el-button @click="stopScrolling">Stop Scrolling</el-button> <el-button @click="scrollToTop">Scroll to Top</el-button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { // 设置一组假数据 const tableData = ref([ { id: 1, name: 'John', age: 25 }, { id: 2, name: 'Jane', age: 22 }, { id: 3, name: 'Tom', age: 30 }, { id: 4, name: 'Lucy', age: 27 }, { id: 5, name: 'Mike', age: 35 }, { id: 6, name: 'Sara', age: 28 }, { id: 7, name: 'David', age: 33 }, { id: 8, name: 'Emma', age: 26 }, { id: 9, name: 'Liam', age: 29 }, { id: 10, name: 'Olivia', age: 24 }, { id: 11, name: 'Sophia', age: 26 }, { id: 12, name: 'Jackson', age: 31 }, { id: 13, name: 'Ava', age: 23 }, { id: 14, name: 'Isabella', age: 32 }, { id: 15, name: 'Ethan', age: 27 } ]); const tableRef = ref(null); let animationFrameId = null; let isScrolling = false; // 滚动表格函数 const scrollTable = () => { if (!tableRef.value) return; // 拿到 table const table = tableRef.value.layout.table.refs; // 获取表格的滚动容器 const tableBodyWrapper = table.bodyWrapper.firstElementChild.firstElementChild; console.log('tableBodyWrapper', tableBodyWrapper); if (!tableBodyWrapper) return; const scrollHeight = tableBodyWrapper.scrollHeight; const scrollTop = tableBodyWrapper.scrollTop; const clientHeight = tableBodyWrapper.clientHeight; // 如果滚动到底部就停止 if (scrollTop + clientHeight >= scrollHeight) { cancelAnimationFrame(animationFrameId); isScrolling = false; return; } // 向下滚动 tableBodyWrapper.scrollTop += 1; // 继续执行下一帧 animationFrameId = requestAnimationFrame(scrollTable); }; // 启动滚动 const startScrolling = () => { if (!isScrolling) { isScrolling = true; scrollTable(); } }; // 停止滚动 const stopScrolling = () => { cancelAnimationFrame(animationFrameId); isScrolling = false; }; const scrollToTop = () => { if (!tableRef.value) return; // 拿到 table const table = tableRef.value.layout.table.refs; // 获取表格的滚动容器 const tableBodyWrapper = table.bodyWrapper.firstElementChild.firstElementChild; if (tableBodyWrapper) { tableBodyWrapper.scrollTop = 0; // 将滚动位置设置为 0，回到顶部 } }; return { tableData, tableRef, startScrolling, stopScrolling, scrollToTop }; } }; </script> <style scoped> /* 可以自定义样式 */ </style>