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 可能无法正常启动。
以上就是vscode运行HTML如何设置端口_vscode运行HTML时自定义端口的设置方法的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/285504.html
微信扫一扫
支付宝扫一扫