vscode通过Live Server插件启动本地服务器预览html，默认端口5500可自定义：1. 安装并启用Live Server插件；2. 打开含html文件的项目文件夹；3. 在设置中搜索live server，修改Live Server > Settings: Port为指定端口（如8080），或在settings.JSon中添加”liveServer.settings.port”: 8080；4. 右键HTML文件选择Open with Live Server，浏览器将打开对应端口地址（如http://127.0.0.1:8080）；若端口占用会提示更换。设置后全局生效，且需确保在项目文件夹内操作以保障正常运行。

VSCode 本身不直接运行 HTML 文件，而是通过插件（如 Live Server）启动本地服务器来预览网页。默认情况下，Live Server 使用端口 5500，但你可以自定义端口。以下是设置方法：

1. 安装 Live Server 插件

确保你已安装并启用了 Live Server 插件：

• 打开 VSCode
• 点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
• 搜索 Live Server
• 点击安装

2. 打开项目文件夹

将包含 HTML 文件的文件夹添加到工作区。Live Server 需要上下文环境才能正确运行。

3. 修改 Live Server 端口设置

进入设置界面修改默认端口：

立即学习“前端免费学习笔记（深入）”；

• 点击左下角齿轮图标 → 设置
• 在搜索框中输入 live server
• 找到 Live Server > Settings: Port
• 将其值改为想要的端口号，例如 3000、8080 等

也可以通过编辑 settings.json 文件进行更灵活配置：

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

41

查看详情

• 在设置页面右上角点击“打开设置 (json)”图标
• 添加如下配置：

“liveServer.settings.port”: 8080

保存后，Live Server 将使用指定端口启动。

4. 启动服务并查看效果

右键点击 HTML 文件 → 选择 Open with Live Server，浏览器会自动打开类似 http://127.0.0.1:8080 的地址，表示已在自定义端口运行。

如果端口被占用，Live Server 会提示并尝试下一个可用端口，也可手动更换避免冲突。

基本上就这些。设置一次后，后续所有项目都会默认使用该端口，除非单独覆盖。不复杂但容易忽略的是必须在项目文件夹内操作，否则 Live Server 可能无法正常启动。