WebStorm运行Vue项目端口冲突的修改方法-webstorm-PHP中文网

vue项目在webstorm中报eaddrinuse，根源是vue-cli-service或vite服务端口被占，应修改vue.config.js的devserver.port、.env中的vue_app_port，或vite.config.ts的server.port；javascript debug配置不控制服务端口，改了无效。

webstorm运行vue项目端口冲突的修改方法

Vue项目在WebStorm里启动报EADDRINUSE，不是IDE配置错了，而是端口被占了——改端口最稳的方式是改脚本参数或环境变量，别去动JavaScript Debug配置。

Vue CLI项目：改`vue.config.js`或环境变量

Vue CLI默认走vue-cli-service serve，端口由它控制，和WebStorm内置服务器无关。直接改配置文件最可靠：

vue.config.js里加devServer.port = 8081（注意不是port: 8081对象写法）
或者加.env文件，写VUE_APP_PORT=8081（Vue CLI会读这个）
环境变量PORT=8081也生效，但老版本Vue CLI可能忽略它，优先选前两种
别在package.json的serve脚本里硬加--port——WebStorm的npm运行配置不一定会透传双横线后的参数，容易失效

Vite项目：改`vite.config.ts`里的`server.port`

Vite的端口由server.port字段决定，改这里比环境变量更明确：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

在vite.config.ts中添加server: { port: 5174 }
环境变量PORT=5174也支持，但Vite优先级是：命令行参数 > 配置文件 > 环境变量
如果用WebStorm的npm配置启动，Arguments栏填--port=5174要加双横线分隔：-- --port=5174，否则会被当成npm参数丢弃
改完记得重启服务，Vite不会热更新端口配置

WebStorm运行配置里哪些地方能设端口、哪些不能

很多人卡在“明明改了Run Configuration里的Port字段，怎么没用？”——因为多数配置根本不控制服务端口：

JavaScript Debug配置里的URL字段不能随便改端口：它只连WebStorm内置静态服务器（默认63342），改了就打不开页面
真要调内置服务器端口，得去Settings → Advanced Settings → Built-in Server Port，改完必须重启WebStorm
npm配置没有Port字段，靠Arguments透传参数；Node.js配置可在Application parameters里填--port=3001
WebStorm的Port输入框（比如Tomcat配置里那个）只影响调试器连接，不影响Vue服务监听的端口

查端口谁在占、怎么快速换掉

改端口前先确认冲突源，避免反复踩坑：

macOS/Linux：用lsof -i :8080看PID，再用kill -9 <pid></pid>干掉（kill <pid></pid>更安全，但有时不响应）
Windows：用netstat -ano | findstr :8080，拿到PID后taskkill /pid <pid> /f</pid>
不想杀进程？直接换高位端口（比如8081、5174、3001），避开常见服务占用区间（80、443、8080、3000）
长期多项目并行，建议集成portfinder：在启动脚本里动态找空闲端口，而不是手敲数字