6 步接入自己的后端：vue-next-admin Vue3 后台模板二次开发实操

6 步接入自己的后端vue-next-admin Vue3 后台模板二次开发实操【免费下载链接】vue-next-admin基于vue3.x 、Typescript、vite、Element plus等适配手机、平板、pc 的后台开源免费模板库vue2.x请切换vue-prev-admin分支项目地址: https://gitcode.com/GitHub_Trending/vu/vue-next-adminvue-next-admin 是基于 vue3.x、TypeScript、Vite 和 Element Plus 的免费后台管理系统模板pinia 管状态、vue-router 4 管路由内置 4 种布局和多语言。本文按跑起来 → 清 mock → 加页面 → 换主题 → 接后端 → 上线前的顺序走一遍二次开发基于仓库 2.4.33 版本。三条命令把项目跑起来Node 版本由 package.json 的 engines 约束16。克隆后依次执行npm install npm run dev开发端口默认 8888在 .env 的VITE_PORT里改。打开后用默认账号 admin / 密码 123456 / 验证码 1234 登录——这三组值写在登录表单 src/views/login/component/account.vue 里验证码只是输入框旁边按钮上的固定文案没有真实校验逻辑。两个容易忽略的点路由用的是 hash 模式src/router/index.ts 里的createWebHashHistory地址栏带#部署到子路径后不用配置服务端重写当前版本 2.4.33升级或排查行为差异时看 CHANGELOG.md。登录后mock 数据藏在三处只是想体验功能可以不动代码要接真实后端这三处必须清用户信息与权限src/stores/userInfo.ts 的getApiUserInfo模拟接口——登录名是 admin 就返回 roles: [admin] 加 4 个按钮权限否则返回 [common] 加 2 个。前端控制路由下菜单只展示meta.roles与 roles 有交集的路由按钮权限用 src/utils/authFunction.ts 里的auth()/auths()判断。菜单接口src/api/menu/index.ts 的getAdminMenu/getTestMenu目前指向演示用 json开启后端控制路由时把它换成自己的菜单接口。tokenaccount.vue 的onSignIn里只是Math.random()写进 Cookie没有走后端对接时换成 src/api/login/index.ts 里的真实登录接口并删掉模拟逻辑代码注释里也标了对接接口时记得删除。添加你的第一个业务页面路由约定写在 src/router/route.ts 顶部注释path 与文件夹同名找文件直接看浏览器地址。步骤在 src/views/ 下建页面组件在dynamicRoutes顶级 children 里复制一个路由块改三处path、component指向//views/xxx/index.vue/是 src 目录别名、metameta 七个字段各司其职isHide隐藏菜单、isKeepAlive组件缓存、isAffix固定到 tagsView、isIframe内嵌外链、roles控制可见角色、icon菜单图标、title显示名称。title现在用的是 i18n key如message.router.systemMenu对应中文词条在 src/i18n/lang/zh-cn.ts 里不想动 i18n 的话在那里加一条新词条是成本最低的做法。主题色和布局改在哪布局和颜色配置全部集中在 src/stores/themeConfig.ts 这个 pinia state 里不散落在样式文件中主题色primary默认 #409efftopBar/menuBar控制顶栏与菜单底色layout可选 4 个值defaults、classic、transverse、columns分别对应 src/layout/main/ 下的四个布局组件站点标题globalTitle、水印文案、初始语言globalI18n默认 zh-cn也在这里。⚠️ 最容易踩的坑这份状态会持久化到 localStorage你改了代码里的默认值页面上不一定变。文件注释里写明了解法——清空浏览器 localStorage或用右上角布局配置面板的一键恢复默认按钮。切到后端控制路由开关就在同一个文件isRequestRoutes默认 false前端控制。改成 true 后行为变化src/router/index.ts 注释里对比了两种模式前端控制路由全写在 route.ts靠meta.roles决定显隐菜单管理界面只是演示后端控制菜单树由接口返回src/router/backEnd.ts 用import.meta.glob预取 views/ 下所有 .vue按后端返回的 component 字符串动态匹配。注意 backEnd.ts 的匹配规则component 路径在 views/ 下必须唯一匹配到 0 个或多个都会直接返回 false页面空白且不报错。所以后端返回的 component 建议写成system/user/index这种带目录的唯一路径。上线前检查清单执行npm run build产出 dist。打包前确认四件事VITE_PUBLIC_PATH.env.production 里默认是演示路径/vue-next-admin-preview/。根域名部署改成/子目录部署改成实际路径否则 build 后静态资源 404vite.config.ts 里它就是打包时的 baseVITE_API_URL.env.production 改成生产接口地址它在 src/utils/request.ts 里被用作 axios 的 baseURLVITE_OPEN_CDN默认 false。设为 true 后 vue、element-plus 等库改从 unpkg 外链加载见 src/utils/build.ts适合有自己 CDN、想压小打包体积的场景浏览器兼容按 README 的表格是 Edge ≥ 88、Chrome ≥ 87、Safari ≥ 13不支持 IE。最后一条所有本地缓存 key 都带vue-next-admin:前缀见 src/utils/storage.ts 的setKey。同一域名下部署多套这套模板时把 package.json 的 name 改掉以隔离缓存否则两套系统会互相读到对方的登录状态。【免费下载链接】vue-next-admin基于vue3.x 、Typescript、vite、Element plus等适配手机、平板、pc 的后台开源免费模板库vue2.x请切换vue-prev-admin分支项目地址: https://gitcode.com/GitHub_Trending/vu/vue-next-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考