跳到主要内容

配置运行文件

一、port 参数规则（关键）​

​

  • 必须保留字段​：在 apps 配置中写 port:（冒号后留空），​不可删除该字段。
  • ​内容可空缺​：留空时系统自动识别项目默认端口（如 Vue 默认 8080、Flask 默认 5000）；默认端口被占用则自动分配新端口。

⚠️错误：删除 port 字段（导致运行失败）；
正确：保留 port:，（不填数值，如 port: ）。

二、preview.yml 文件定位与作用​

  • ​路径​：项目根目录下的 .vscode/preview.yml（需显示隐藏文件）。
  • ​作用​：定义项目启动命令、端口、环境依赖及多服务配置。

三、打开与编辑方法​

（一）方法 1​

​工程目录打开​：左侧「工程区域」展开项目根目录 → 双击文件夹 .vscode→ 双击 preview.yml。 ​

（二）方法 2​

快捷打开​：点击顶部「运行」按钮下拉箭头 → 选择「查看配置文件」。

四、配置示例（port 字段必保留）​

（一）前端项目（指定/留空端口）​

# 指定端口（如 8080）
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: 后端服务

五、参数详解​

参数说明示例值
port必须保留，留空自动分配端口8080/留空
run项目启动命令（如 npm run dev）核心字段
root启动命令的工作目录./frontend
autoOpen是否自动运行服务（根级/应用级）true/false
autoPreview是否自动打开 Web 预览窗口true/false

六、常见问题​

  1. 运行失败​：检查 port:字段是否存在（不可删除）。
  2. 端口冲突​：留空 port:让系统自动分配，或手动改用冷门端口（如 8081）。
  3. 命令/路径错误​：确认 run命令和 root目录与项目实际匹配。