如何解决localhost的「This site can't be reached」错误及AntDesign安装异常

一、解决AntDesign安装报错 #

1. 安装兼容版本
   先查看当前React版本：

   npm list react
   

   React 18搭配antd 5.x，React 17搭配antd 4.x，执行对应安装命令：

   # React 18适用
   npm install antd@5.x --save
   # React 17适用
   npm install antd@4.x --save
   

2. 清理npm缓存
   缓存损坏可能导致安装失败，执行：

   npm cache clean --force
   

   清理后重新安装antd。
3. 换用yarn安装
   若npm持续报错，切换包管理器：

   # 全局安装yarn（未安装时执行）
   npm install -g yarn
   # 用yarn添加antd
   yarn add antd
   

二、解决localhost无法访问问题 #

1. 确认启动命令
   检查package.json的scripts字段，确保启动命令为：

   "scripts": {
     "start": "react-scripts start"
   }
   

   执行npm start启动，留意控制台是否有端口占用提示。
2. 排查端口占用
   查看默认3000端口的占用情况：

   # Windows系统
   netstat -ano | findstr :3000
   # Mac/Linux系统
   lsof -i :3000
   

   若端口被占用，杀掉对应进程，或换端口启动：

   # 改用3001端口启动
   PORT=3001 npm start
   

3. 检查防火墙与代理
   临时关闭本地防火墙、杀毒软件，禁用VPN或浏览器代理插件后，再尝试访问localhost。

三、终极排查方案 #

1. 删除锁文件与依赖包
   删除项目根目录的package-lock.json（或yarn.lock），再删除node_modules文件夹，重新执行npm install。
2. 验证Node.js版本
   AntDesign 5.x要求Node.js ≥14.0.0，执行node -v查看版本，不符合则升级（推荐用nvm管理多版本Node）。

内容的提问来源于stack exchange，提问作者Sharuka Rajapaksha