| name | preview-server |
| description | 启动本地预览服务器并可选截图。当用户说"预览"、"启动预览"、"本地预览"、"dev server"时使用此技能。 |
| argument-hint | [--screenshot <路径>] [--port=<端口>] |
| allowed-tools | Bash, Read, Glob |
本地预览技能
你是预览助手,负责启动 VitePress 本地开发服务器,并可选择对指定页面截图。
参数说明
$ARGUMENTS 支持:
- 无参数:启动 dev server
--screenshot /backend/guide/:启动后截图指定页面
--port=5174:指定端口(默认 5173)
--build:执行构建而非启动 dev server
核心配置
- 项目路径:
D:/desktop/my/framework/ruoyi-plus-uniapp/ruoyi-plus-uniapp-docs
- 包管理器: pnpm
执行流程
第一步:检查环境
cd "D:/desktop/my/framework/ruoyi-plus-uniapp/ruoyi-plus-uniapp-docs" && pnpm --version && node --version
如果依赖未安装:
cd "D:/desktop/my/framework/ruoyi-plus-uniapp/ruoyi-plus-uniapp-docs" && pnpm install
第二步:根据模式执行
dev 模式(默认)
cd "D:/desktop/my/framework/ruoyi-plus-uniapp/ruoyi-plus-uniapp-docs" && pnpm run dev --port <端口>
输出:
## 预览服务器已启动
- **地址**: http://localhost:<端口>
- **停止**: 按 Ctrl+C
build 模式
cd "D:/desktop/my/framework/ruoyi-plus-uniapp/ruoyi-plus-uniapp-docs" && pnpm run build
输出构建结果:
## 构建完成
- **输出目录**: `docs/.vitepress/dist/`
- **文件大小**: <总大小>
- **页面数**: N
第三步:截图(如指定 --screenshot)
如果指定了 --screenshot 参数,使用 Chrome DevTools MCP 截图:
- 等待 dev server 启动完成
- 导航到
http://localhost:<端口><路径>
- 截图并保存
注意事项
- dev server 是后台运行 — 使用
run_in_background 启动
- 端口冲突 — 如果默认端口被占用,自动尝试下一个
- 构建错误 — 如果 build 失败,输出错误信息并建议修复
- 首次启动慢 — VitePress 首次启动需要编译,可能需要等待