Cloud Studio 如何使用 Live Server 插件

这篇说说如何在Cloud Studio中使用Live Server插件预览静态HTML页面,包括安装插件、启动预览及解决资源404等常见问题。 安装插件:搜索并安装Cloud Studio Live Server插件后重载窗口。 启动预览:在HTML文件右上角点击Show Preview图标即可打开预览。 常见问题:资源404时检查相对路径,确保从项目根目录打开工作区。

相关产品
Cloud Studio(云端 IDE) 产品页,含版本规格、价格与购买入口。

注意:这是一个 FAQ

一、一、准备:安装 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 文件。

赞 (0)
上一篇 4天前
下一篇 4天前