早上到公司,咖啡刚泡好,正准备写代码,结果一运行开发环境,卡住了。终端报错一堆英文,看着就头疼。这种情况不少见,尤其是用 Vue、React 或 Node 项目的时候,明明昨天还好好的,今天就起不来了。
端口被占用
最常见的问题之一是端口被占用了。比如你习惯用 3000 端口跑前端服务,但可能有个旧进程还在后台挂着。这时候启动就会提示 Address already in use。
可以试试在终端执行:
lsof -i :3000
找到对应的 PID,然后 kill 掉:
kill -9 <PID>
再重新启动服务,大概率就正常了。
依赖没装全
换电脑、重装系统或者拉新项目时,容易漏装依赖。node_modules 文件夹看似存在,但某些原生模块编译失败,比如 node-sass 或 sqlite3,会导致启动直接崩溃。
别急着删整个 node_modules,先试试:
npm install --force
强制重新安装所有包。如果还是不行,再彻底删除 node_modules 和 package-lock.json,然后重新 install。
环境变量不对
有些项目依赖 .env 文件,比如数据库地址、API 地址写在里头。要是文件丢了,或者复制别人配置时忘了改本地端口,服务一启动就连接超时,卡在那儿不动。
检查项目根目录有没有 .env.development 或 .env.local,对照文档看看必要字段是否都填对了。常见的像 API_BASE_URL=http://localhost:8080 这种,写错一个字符都会请求失败。
内存不足
特别是 Mac 用户开 Docker + 多个服务 + VS Code + 浏览器十几个标签页,再跑个 Webpack 编译,内存直接飙红。Node 服务可能因为内存溢出被系统终止,日志里能看到 JavaScript heap out of memory。
可以临时增加 Node 内存限制:
node --max-old-space-size=4096 ./node_modules/.bin/vue-cli-service serve
当然,更好的办法是关掉不用的程序,或者升级硬件。
配置文件冲突
有时候改过 webpack.config.js 或 vite.config.ts,加了个插件路径写错了,或者 alias 配得有问题,一启动就报模块找不到。这种错误信息通常很明确,会告诉你哪个路径解析失败。
别慌,按提示去配置文件里一行行查,尤其是你昨天最后改过的部分。版本控制工具这时候就派上用场了,git diff 看一眼改动,很快能定位问题。
开发环境起不来,多数不是大问题,关键是要看懂报错信息。别一看到红色就懵,逐行读日志,从第一句错开始追,往往几分钟就能解决。平时记得提交代码前 clean build 一下,也能少踩很多坑。