跳到主要内容

配置运行文件

概述

本页说明如何通过 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
  1. 回到应用浏览页点击 「启动」，会优先打开设置为主端口的页面

六、参数速查​

参数说明示例
port必须保留；留空自动分配端口8080 / 留空
run启动命令npm run dev
root启动命令工作目录./frontend
autoOpen是否自动运行服务true / false
autoPreview是否自动打开预览窗口true / false
mainPort是否为主预览端口true / false

常见问题​

  • 运行失败：确认 apps 中存在 port: 字段（不可删除）。
  • 端口冲突：把 port: 留空让系统自动分配，或手动改为其他端口（如 8081）。
  • 启动失败/找不到目录：检查 run 命令与 root 目录是否与项目实际一致。