live server 默认端口为5500，需在项目级.vscode/settings.json中设置"liveserver.settings.port": 8080等未占用端口并重新启动服务才能生效，仅状态栏临时切换不持久。
Live Server 默认端口怎么改
Live Server 插件默认用 5500，但只要本机有其他程序占了这个端口（比如另一个 Live Server 实例、Python 的 http.server、或某些后台服务），它就会自动 fallback 到下一个可用端口——这看起来“能跑”，但会导致你书签失效、前端调试地址不一致、甚至本地 API 调用因端口变化而跨域失败。
你应该主动固定一个端口，而不是依赖自动 fallback。
- 打开 VS Code 设置（
Ctrl+,或Cmd+,） - 右上角点搜索图标，输入
liveServer.settings.port - 找到设置项后，点击右侧铅笔图标 → Edit in settings.json
- 在弹出的
settings.json里添加或修改这一行："liveServer.settings.port": 8080
（可换成任意未被占用的数字，如3000、8000） - 保存文件，重启 VS Code 或重新打开 HTML 文件生效
改完端口却没生效？检查这几个地方
常见现象是改了 settings.json 但右键菜单里还是启动 5500，或者浏览器打开的仍是旧端口。这不是插件 bug，而是配置作用域或覆盖逻辑问题。
- 确认你改的是 当前工作区 的
settings.json，而不是用户级设置——如果项目根目录下有.vscode/settings.json，它会优先覆盖全局设置 - 检查有没有拼写错误：
liveServer.settings.port中的liveServer是小写l，不是LiveServer或liveserver - 确保没有其他插件干扰：比如
Five Server也提供类似功能，它的端口设置叫fiveServer.port，和 Live Server 无关，别混在一起改 - 改完后必须重新触发 Live Server 启动：关掉已打开的浏览器标签页，再右键当前
index.html→Open with Live Server，不能只刷新页面
端口选多少才安全又顺手
选端口不是随便填个四位数就行。有些端口系统保留、有些被常用工具预占、还有些在公司内网被策略拦截。
- 避开
0–1023：这些是特权端口，普通用户启动可能失败（尤其 Windows 和 macOS 上） - 避开常见冲突端口：
3000（Create React App）、4200（Angular CLI）、5173（Vite 默认）、8000（Django/Python）、8080（Tomcat/Nginx 常见）——除非你确定没开这些服务 - 推荐范围：
5501–5599或8081–8099，既避开默认又不易撞车 - 如果要在手机上访问（比如测试响应式），记得同时配
liveServer.settings.host为"localhost"或"0.0.0.0"，否则只监听127.0.0.1，手机连不上
为什么不能只靠状态栏点“Change Port”
VS Code 状态栏右下角显示端口号时，确实有个“Change Port”选项，但它只是**本次会话临时切换**，不会持久化到设置里。下次你关掉窗口再重开，或者换个项目，它又回到 5500。
这个按钮适合快速验证某个端口是否可用，但不能替代 settings.json 配置。真正要稳定协作、避免队友反复踩坑，必须写死在配置文件里——尤其是团队项目中，把 liveServer.settings.port 加进 .vscode/settings.json 并提交 Git，比口头提醒靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
