Django+React项目编译成功但无法访问localhost问题求助

1. 修正Dev Server绑定地址 #

很多React开发服务器默认只绑定localhost，偶尔会出现解析异常，试试启动时指定绑定全地址：

HOST=0.0.0.0 PORT=8001 npm run dev

之后用http://0.0.0.0:8001或你的本地IP（比如http://192.168.x.x:8001）访问，避免只依赖localhost解析。

2. 针对不同脚手架调整配置 #

不同React初始化工具的配置文件位置不同，别死找webpack.config.js：

• Vite项目：编辑vite.config.js，修改server配置：

  export default defineConfig({
    server: {
      host: '0.0.0.0',
      port: 8001,
      open: true // 启动后自动打开浏览器
    }
  })
  

• Create React App项目：它封装了Webpack配置，不用手动改webpack.config.js，直接创建.env.development文件添加：

  HOST=0.0.0.0
  PORT=8001
  

• 手动配置Webpack：如果是自己搭的项目，先新建webpack.config.js，添加devServer配置：

  module.exports = {
    // 其他编译配置...
    devServer: {
      host: '0.0.0.0',
      port: 8001,
      hot: true,
      open: true
    }
  }
  

3. 排查端口与防火墙问题 #

• 检查端口是否被占用：Windows执行netstat -ano | findstr :8001，Mac/Linux执行lsof -i :8001，如果有占用，换个端口比如8080重试。
• 临时关闭本地防火墙，或者给开发服务器添加网络放行规则，避免防火墙拦截请求。

4. 关于dist文件夹的说明 #

dist是生产环境编译后的产物，只有执行npm run build才会生成，npm run dev是开发热重载模式，不会生成这个文件夹，完全不影响开发阶段的访问，不用纠结。

内容的提问来源于stack exchange，提问作者Vanessa Sánchez Morales