默认ASP.NET Core 3.1 React Redux模板运行后白屏问题求助

• 检查Node.js版本兼容性
  ASP.NET Core 3.1的React模板对Node.js版本有严格要求，建议使用14.x或16.x系列版本（高版本Node如18+可能存在兼容性问题）。通过终端执行node -v查看当前版本，若版本不符，可使用nvm（Node版本管理器）切换到兼容版本。

• 清理并重新安装前端依赖
  进入项目根目录下的ClientApp文件夹：

  1. 删除node_modules文件夹和package-lock.json文件
  2. 执行npm install重新安装所有依赖
  3. 重新启动项目测试

• 验证SPA中间件配置
  打开Startup.cs文件，检查Configure方法中的SPA配置是否正确：

  app.UseSpaStaticFiles();
  
  app.UseRouting();
  
  // 其他中间件配置（如授权、路由）...
  
  app.UseSpa(spa =>
  {
      spa.Options.SourcePath = "ClientApp";
  
      if (env.IsDevelopment())
      {
          spa.UseReactDevelopmentServer(npmScript: "start");
      }
  });
  

  确保UseSpaStaticFiles和UseSpa的顺序正确，且SourcePath指向正确的前端目录。

• 手动启动前端开发服务器

  1. 打开终端，进入ClientApp目录，执行npm start
  2. 等待控制台输出Compiled successfully后，再启动ASP.NET Core后端项目
  3. 观察页面是否能正常加载

• 检查端口占用情况
  前端默认使用3000端口，后端默认使用5000/5001端口，若端口被占用会导致页面无法加载：

  • Windows系统：执行netstat -ano | findstr :3000查看占用进程，通过任务管理器杀掉对应PID
  • Mac/Linux系统：执行lsof -i :3000查看占用进程，执行kill -9 <PID>终止进程
  • 也可修改前端端口：在ClientApp/package.json中修改start脚本，例如"start": "set PORT=3001 && react-scripts start"（Windows）或"start": "PORT=3001 react-scripts start"（Mac/Linux）

• 排查浏览器网络请求
  打开浏览器开发者工具（F12）切换到Network标签页，刷新页面：

  • 检查所有资源的加载状态，是否存在404/500等错误
  • 确认静态资源、JS bundle文件是否正常加载，若存在加载失败，需检查静态文件配置或路径是否正确

• 核对launchSettings.json配置
  打开Properties/launchSettings.json，确保配置的应用URL和环境变量正确：

  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "YourProjectName": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者Jimmy Boy