WebStorm内置预览服务器端口在Settings → Build, Execution, Deployment → Debugger → Built-in server中修改Port值，且必须重启IDE才生效；需同步更新JetBrains IDE Support插件端口、启用外部连接并配置Deployment映射以支持局域网访问。
WebStorm 内置预览服务器端口在哪改
内置预览（即 Debug 'index.html' 启动的 localhost:63342）端口不是项目级配置，而是全局 IDE 设置。改端口必须进 Settings → Build, Execution, Deployment → Debugger → Built-in server，修改 Port 值，然后**重启 WebStorm** 才生效。不重启，改了也白改。
常见错误：在 npm script 里加 --port 8080，以为能影响 Debug 模式——没用。那只是控制你自己的 dev server，和 WebStorm 内置服务完全无关。
为什么改了端口，浏览器刷新后热更新就失效了
因为 Debug 模式依赖两个端点严格对齐：
- WebStorm 内置服务监听的端口（比如你设成
8080） - Chrome 插件
JetBrains IDE Support配置的端口
插件端口必须手动同步：地址栏输入 chrome://extensions/ → 找到该插件 → Details → Extension options → 只填纯数字端口号（如 8080），不能带 http:// 或 localhost。填错或漏填，页面顶部不会出现“JetBrains IDE Support is connected”黄条，改代码自然没反应。
想让手机或同事访问你的预览页面，只改端口不够
即使把内置端口改成 8080，默认仍只绑定 localhost，外部设备连不上。必须额外两步：
- 在
Settings → Debugger → Built-in server中勾选Can accept external connections - 配 Deployment 映射：进入
Settings → Deployment→ 添加Local or mounted folder类型 →Connection → Web server root URL填http://[你的本机IP]:8080（用ipconfig或ifconfig查 IP）→Mappings里确保本地路径和 Web 路径一致（如都为/）
Deployment 配置完，右键 HTML 文件 → Copy Relative Path 或直接点绿色三角形运行，生成的 URL 才是可被局域网访问的真实地址。
npm / vite / webpack 项目该去哪调端口
这类项目走的是自己启动的 dev server，和 WebStorm 内置服务无关。端口由脚本控制：
-
package.json里写死：比如"dev": "vite --port 5174" - WebStorm 运行配置中，在
npm类型配置的Arguments栏填-- --port 5174（注意双横线分隔） - Node.js 类型配置则在
Application parameters传参，如--port 3000
关键点：前端请求 API 的地址（如 fetch('/api')）如果走代理，要同步检查 vite.config.ts 或 vue.config.js 里的 proxy 配置，否则端口改了，接口可能 404。
改端口本身不难，难的是改完之后，所有依赖端口的地方——IDE、插件、部署映射、前端代理、甚至公司防火墙——得同步跟上。漏一个，整个链路就断在看不见的地方。
