概述
本页为您介绍如何通过
preview.yml 配置项目的启动命令与预览端口。一、preview.yml 在哪？做什么？
路径：项目根目录的
.vscode/preview.yml（需要显示隐藏文件）。作用：定义项目启动命令（
run）、工作目录（root）、端口（port）以及多服务配置。二、如何打开
方式 1
左侧工程区 >
.vscode > preview.yml
方式 2
顶部 「运行」 下拉 > 「查看配置文件」
三、port 规则
在
apps 中 必须保留 port:，不要删除。port: 可以留空：系统会自动识别项目默认端口；若端口冲突会自动分配新端口。正确写法示例
保留
port:（冒号后不填数字）。四、常用配置示例
前端项目
# 指定端口apps:- port: 8080run: npm run devroot: ./frontendname: 前端应用# 自动端口（留空）apps:- port:run: npm run devroot: ./frontendname: 前端应用
后端项目
apps:- port:run: flask runroot: ./backendname: 后端服务
五、设置主预览端口
注意
仅在"应用主页预览"场景下生效。
1. 打开
preview.yml2. 在目标服务配置里加上
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 目录是否与项目实际一致。
