6

我正在尝试使用具有最新 SpaServices 扩展的 ASP.NET Core 3.1 运行多个 React SPA 应用程序，并且在提供静态资产时遇到问题。我构建的大部分内容都来自一个类似的问题：如何为 SpaServices 托管的多个 SPA 配置 ASP.net Core 服务器路由，但这与 Angular 和旧版本的 SpaServices 有关。

我的代码有两个 React 应用程序，ClientApp并且AdminApp我使用以下启动代码对每个应用程序进行了配置：

app.Map("/client", clientApp =>
{
    clientApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
});

app.Map("/admin", adminApp =>
{
    adminApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "AdminApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
});

转到/clientand/admin路由会提供正确的 React文件，但不会加载index.html链接的捆绑文件。以下是SPA.js的最终索引 HTML 示例：ClientApp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <base href="/client" />
    <title>Client App</title>
  </head>
  <body>
    <h1>Client App</h1>
    <div id="root"></div>
    <script src="/static/js/bundle.js"></script>
    <script src="/static/js/0.chunk.js"></script>
    <script src="/static/js/main.chunk.js"></script>
  </body>
</html>

问题是链接是相对于站点的根目录的，/static/js/bundle.js并且需要相对于 React 应用程序的路径。示例文件路径应分别为/client/static/js/bundle.js和/admin/static/js/bundle.js。

如何让将路径写入 index.html 文件的系统为静态文件使用正确的根路径？谢谢。

4

1 回答 1

2

想出一个可能的解决方案。期望构建 SPA 将其构建目录的内容复制到 .NET Core 项目的 wwwroot 文件夹中的文件夹中，该文件夹使用与 SPA 将使用的路由相同的名称。在这种情况下，我们有两个应用程序，guestuser并且payinguser. 配置函数中的映射将重定向用户请求以将静态文件拉出相应的 wwwroot 文件夹。

启动.cs

public void ConfigureServices(IServiceCollection services)
{
   ...
   services.AddSpaStaticFiles();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...

   app.UseStaticFiles(new StaticFileOptions()
   {
       FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot"))
   });

   app.Map("/guestuser", mappedSpa=>
   {
       mappedSpa.UseSpa(spa =>
       {
           spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions()
           {
               FileProvider =
                   new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/guestuser"))
           };
           spa.Options.SourcePath = "wwwroot/guestuser";
       });
   });

   app.Map("/payinguser", mappedSpa=>
   {
       mappedSpa.UseSpa(spa =>
       {
           spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions()
           {
               FileProvider =
                   new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/payinguser"))
           };
           spa.Options.SourcePath = "wwwroot/payinguser";
       });
   });
}

在 ReactJS 项目中，您需要为每个项目更新/添加homepage属性到package.json文件中，以使用与 wwwroot 文件夹下站点托管的文件夹相同的名称。这将更新生成代码的路径以在其文件引用中使用路径名。

{
  "name": "guest-user",
  "homepage": "guestuser",
  ...
}
于 2020-12-07T20:54:32.810 回答