跳到主要内容

如何使用 Live Server 插件

这是一个 FAQ

本文适用于 预览纯静态页面（HTML/CSS/JS）。

如果你在跑 React/Vue/Next.js 等项目，请优先使用对应框架的开发服务器（例如 npm run dev）。启动后的端口和预览地址的配置，请参考端口与 Web 预览插件

一、准备：安装 Live Server 插件​

  1. 打开左侧 扩展（Extensions）。
  2. 搜索并安装：Cloud Studio Live Server。
  3. 安装完成后，重载窗口（如有提示）。

二、启动与打开​

在 HTML 文件的右上角点击 Show Preview 图标后即可。

启动成功后，通常会在弹出一个新的标签页 CloudStudio。

常见问题​

  • 页面能打开，但刷新后资源 404 / 路径不对？
    • 检查资源引用路径：静态站点更推荐使用相对路径（如 ./assets/app.css）。
    • 确认打开的目录：尽量从项目根目录打开工作区，并确保 HTML 文件与资源路径一致。
  • 为什么没有 Show Preview 图标？
    • 目前测试是发现只有 HTML 文件才会出现这个图标，其他文件不会出现。
    • 并且标签页也只能有一个 HTML 文件才可以，如果有其他标签页，那么这个图标就不会出现。
备注

如果你使用了 Live Server 插件，那么在你保存文件时，Live Server 会自动启动一个本地服务器，并在浏览器中打开你的 HTML 文件。