ASP.NET Core Vue SPA启动后新窗口显示空白页问题求助

问题分析 #

你遇到的情况是因为ASP.NET Core Vue SPA模板默认在启动时会调用浏览器的隔离会话模式（无书签、无扩展），同时非调试模式下如果SPA静态资源未正确发布，会导致空白页；而MVC模板默认使用常规浏览器窗口启动，所以没有这个问题。

解决方案 #

1. 修改浏览器启动行为，使用现有窗口打开

编辑项目根目录下的Properties/launchSettings.json文件：

• 找到你正在使用的启动配置（比如http或https对应的profile）
• 确保配置中没有启动私有/无痕模式的参数，同时调整启动行为：

  "profiles": {
    "YourProjectName": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "https://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Production"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      // 移除任何类似 --incognito、--private 的参数，确保使用常规窗口
      "launchBrowserArgs": ""
    }
  }
  

• 保存文件后重新启动应用，浏览器会在现有窗口的新标签页打开页面，而非隔离模式的新窗口。

2. 修复非调试模式下的空白页问题

非调试模式下ASP.NET Core不会代理到Vue开发服务器，需要确保SPA静态资源已正确发布：

• 进入Vue项目目录（默认是ClientApp）
• 执行命令构建生产包：

  npm run build
  

• 将ClientApp/dist目录下的所有文件复制到ASP.NET Core项目的wwwroot目录中
• 检查Program.cs中的SPA中间件配置，确保非调试模式下指向正确的静态文件路径：

  app.UseSpa(spa =>
  {
      spa.Options.SourcePath = "ClientApp";
  
      if (!app.Environment.IsDevelopment())
      {
          spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
          {
              FileProvider = new PhysicalFileProvider(
                  Path.Combine(Directory.GetCurrentDirectory(), "wwwroot"))
          };
      }
  });
  

完成以上步骤后，启动非调试模式的SPA应用，就能像MVC应用一样在现有浏览器窗口正常加载Vue内容了。

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