gpt4 book ai didi

reactjs - 如何在单个 ASP.NET Core 站点上托管多个 React SPA 应用程序?

转载 作者:行者123 更新时间:2023-12-03 17:23:35 25 4
gpt4 key购买 nike

我正在尝试使用 ASP.NET Core 3.1 和最新的 SpaServices 扩展来运行多个 React SPA 应用程序,但在提供静态 Assets 时遇到了问题。我构建的大部分内容都来自以下类似问题:How to configure ASP.net Core server routing for multiple SPAs hosted with SpaServices但这与 Angular 和旧版本的 SpaServices 有关。
我的代码有两个 React 应用程序,ClientAppAdminApp我已经使用以下启动代码配置了每个:

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");
}
});
});
/client/admin路由服务于正确的 React index.html文件,但链接捆绑 .js文件不加载。这是 ClientApp 的最终索引 HTML 的示例温泉:
<!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 文件以使用静态文件的正确根路径?谢谢。

最佳答案

想出一个可能的解决方案。期望构建 SPA 将其构建目录的内容复制到 .NET Core 项目的 wwwroot 文件夹中的文件夹中,该文件夹使用与 SPA 将使用的路由相同的名称。在这种情况下,我们有两个应用程序,guestuserpayinguser . Configure 函数中的映射将重定向用户请求以将静态文件从适当的 wwwroot 文件夹中拉出。
Startup.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属性(property)给 package.json每个项目的文件也使用与站点将在 wwwroot 文件夹下托管的文件夹相同的名称。这将更新生成代码的路径以在其文件引用中使用路径名。
{
"name": "guest-user",
"homepage": "guestuser",
...
}

关于reactjs - 如何在单个 ASP.NET Core 站点上托管多个 React SPA 应用程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64013772/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com