企业官网建设流程全解析

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-admin

vue-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 数据藏在三处

只是想体验功能可以不动代码；要接真实后端，这三处必须清：

1. 用户信息与权限：src/stores/userInfo.ts 的getApiUserInfo模拟接口——登录名是 admin 就返回 roles: ['admin'] 加 4 个按钮权限，否则返回 ['common'] 加 2 个。前端控制路由下，菜单只展示meta.roles与 roles 有交集的路由；按钮权限用 src/utils/authFunction.ts 里的auth()/auths()判断。
2. 菜单接口：src/api/menu/index.ts 的getAdminMenu/getTestMenu目前指向演示用 json，开启后端控制路由时把它换成自己的菜单接口。
3. token：account.vue 的onSignIn里只是Math.random()写进 Cookie，没有走后端；对接时换成 src/api/login/index.ts 里的真实登录接口，并删掉模拟逻辑（代码注释里也标了"对接接口时记得删除"）。

添加你的第一个业务页面

路由约定写在 src/router/route.ts 顶部注释：path 与文件夹同名，找文件直接看浏览器地址。步骤：

1. 在 src/views/ 下建页面组件；
2. 在dynamicRoutes顶级 children 里复制一个路由块，改三处：path、component（指向/@/views/xxx/index.vue，/@是 src 目录别名）、meta；
3. meta 七个字段各司其职：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默认 #409eff，topBar/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。打包前确认四件事：

1. VITE_PUBLIC_PATH：.env.production 里默认是演示路径/vue-next-admin-preview/。根域名部署改成/，子目录部署改成实际路径，否则 build 后静态资源 404（vite.config.ts 里它就是打包时的 base）；
2. VITE_API_URL：.env.production 改成生产接口地址，它在 src/utils/request.ts 里被用作 axios 的 baseURL；
3. VITE_OPEN_CDN：默认 false。设为 true 后 vue、element-plus 等库改从 unpkg 外链加载（见 src/utils/build.ts），适合有自己 CDN、想压小打包体积的场景；
4. 浏览器兼容：按 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