一、概述
本页为你介绍如何通过 preview.yml 配置项目的启动命令与预览端口。
二、一、preview.yml 在哪？做什么？
·路径：项目根目录的 .vscode/preview.yml（需要显示隐藏文件）。
·作用：定义项目启动命令（run）、工作目录（root）、端口（port）以及多服务配置。
三、方式 1
左侧工程区 > .vscode > preview.yml
四、方式 2
顶部 「运行」 下拉 > 「查看配置文件」
五、三、port 规则
·在 apps 中 必须保留 port:，不要删除。
·port: 可以留空：系统会自动识别项目默认端口；若端口冲突会自动分配新端口。
注意：正确写法示例
注意：保留 port:（冒号后不填数字）。
六、前端项目
# 指定端口apps: – port: 8080 run: npm run dev root: ./frontend name: 前端应用# 自动端口（留空）apps: – port: run: npm run dev root: ./frontend name: 前端应用
七、后端项目
apps: – port: run: flask run root: ./backend name: 后端服务
八、五、设置主预览端口
注意：仅在"应用主页预览"场景下生效。
1. 打开 preview.yml
2. 在目标服务配置里加上 mainPort: true
3. 回到应用浏览页点击 「启动」，会优先打开设置为主端口的页面
九、六、参数速查
| 参数 | 说明 | 示例 |
| port | 必须保留；留空自动分配端口 | 8080 / 留空 |
| run | 启动命令 | npm run dev |
| root | 启动命令工作目录 | ./frontend |
| autoOpen | 是否自动运行服务 | true / false |
| autoPreview | 是否自动打开预览窗口 | true / false |
| mainPort | 是否为主预览端口 | true / false |
十、常见问题
·运行失败：确认 apps 中存在 port: 字段（不可删除）。
·端口冲突：把 port: 留空让系统自动分配，或手动改为其他端口（如 8081）。
·启动失败/找不到目录：检查 run 命令与 root 目录是否与项目实际一致。