网页路由页面树

在 VSCode 侧边栏以树形展示前端项目(若依 RuoYi 等)的网页路由/菜单,点击节点直接打开对应源文件,实现「网页菜单 → 源码」一键跳转。

为什么需要

若依这类后台框架的业务页面路由是后端动态下发的(/getRouters 接口),src/router/index.js 里只写了登录、首页等少量静态路由。开发时找某个业务页面只能靠记忆或全局搜文件名,和网页菜单对不上。

本扩展直接调用你配置的接口,把网页菜单结构原样还原到编辑器侧边栏,标题取自后端菜单的 meta.title,点击即打开对应的 .vue。

适用于->

vue项目，并且是根据路由组件进行跳转的vue项目，原理是根据请求后端接口得到的json文件来书写列表

快速开始

1. npm/pnpm/...等先启动项目，在宿主窗口中打开你的前端项目

2. F5 调试(开发模式):用 VSCode 打开本项目 → 按 F5 启动「扩展开发宿主」。

3. 两种方式都可以：

   1. 控制台显示：

   App running at:

   • Local: http://localhost:80/

   时候，baseURL为http://localhost:80/，这是用的nodejs转发的地址，也可以使用 2. 直接使用后端地址： 假设为http://localhost:8080 那么，baseURL为http://localhost:8080/

   然后，填写以下三项并保存(保存后自动刷新):

   配置项	示例值	说明
   baseURL	同上baseURL	其实就是前端地址
   endpoint	/getRouters	接口路径,默认即可
   token(如果有)	(从浏览器 cookie 复制)	JWT。若依项目:登录后按 F12 → Application → Cookies → 复制 Admin-Token 的值

4. 侧边栏「页面路由」树即显示完整菜单;点击任意页面节点 → 打开对应 .vue。

配置项

工作原理

1. baseURL + endpoint 拼成请求 URL,带上 Authorization 头(若 token 非空)和 extraHeaders,GET 请求。
2. 按 responseDataPath 从响应取数组,递归解析。每个节点:
   • 标题取 meta.title(回退到 name/path)
   • component ∈ containerComponents(如 Layout)→ 容器节点,只展开不打开
   • component 为字符串 → 文件节点,可点击
   • component 为空 → 目录节点
3. 点击文件节点:viewsPrefix + component(+ 自动补 .vue)→ 工作区内相对路径 → 打开。找不到时依次尝试 .vue/.js/.ts 等后缀,仍失败则提示定位父目录。

兼容性

• 已针对若依 RuoYi-Vue 验证;通过调整 responseDataPath、viewsPrefix、successCode 可适配其他返回类似菜单结构的项目。
• 零运行时依赖,使用 VSCode 内置全局 fetch(扩展宿主 Node 18+),不受浏览器 CORS 限制。

打包安装

npm install
npm run compile
npx @vscode/vsce package        # 生成 .vsix
code --install-extension ruoyi-route-tree-0.0.1.vsix

安全提示

token 会以明文存储在 VSCode 的 settings.json 中。建议把配置放在工作区的 .vscode/settings.json(已加入 .gitignore 习惯),避免提交到仓库。