2

在 VS2019 Preview 中，您有多个模板。我对以下两个感兴趣： 在此处输入图像描述

我和两者都玩了一下，我观察到了不同。在ASP.NET Core with React.js模板中，启动了一个 SPA 代理服务器，而在ASP.NET Core with React.js and Redux没有它的情况下简单地工作（第二个模板在 TS 中，而不是 JS 中）。

我的意思是simply works without that。我查看了这两个.csproj文件，发现了一个差异（我只会附上值得注意的差异）：

第一个模板：

...
    <SpaProxyServerUrl>https://localhost:5002</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.0-preview.6.21355.2" />
  </ItemGroup>
...
 <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
...

第二个模板：

...
# SpaProxy stuff missing
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="6.0.0-preview.5.21301.17" />
  </ItemGroup>
...
 <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**; $(SpaRoot)build-ssr\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>

请注意，在第二个模板Microsoft.AspNetCore.SpaServices.Extensions中使用而不是Microsoft.AspNetCore.SpaProxy.

文件中也存在一些差异Startup.cs。第二个模板使用了一些额外的中间件

    public void ConfigureServices(IServiceCollection services)
    {
      services.AddControllersWithViews();

      // NEW
      services.AddSpaStaticFiles(configuration =>
      {
        configuration.RootPath = "ClientApp/build";
      });
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      ...
      // NEW
      app.UseSpaStaticFiles();
      ...
      // NEW
      app.UseSpa(spa =>
      {
        spa.Options.SourcePath = "ClientApp";

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

我还观察到，在 JSClientApp中有一个setupProxy.js文件，而在 TSClientApp中没有。该npm start命令也设置为"start": "rimraf ./build && react-scripts start"，在 TS 文件中它只是react-scripts start.

我试图进行必要的调整来运行 TS 应用程序这样的 JS 应用程序，但我认为我遇到了一个问题，因此我遗漏了一些东西：

System.Net.Http.HttpRequestException：无法将请求代理到 http://localhost:61105/，因为对代理目标的请求失败。检查代理目标服务器是否正在运行并接受对 http://localhost:61105/ 的请求。

虽然这个错误确实有意义，但我不知道 TS 模板在哪里以及如何启动这样的代理服务器（如果有的话）。

我的问题是：我可以在JS模板中获取TS模板的行为吗？如果是，如何？如果不是，为什么？

4

2 回答 2

1

我不知道 TS 模板在哪里以及如何启动这样的代理服务器（如果有的话）。

这就是spa.UseReactDevelopmentServer(npmScript: "start")为你做的。看看你的package.json，你会看到start脚本在端口 5002 上启动代理服务器。

于 2021-09-17T13:15:22.590 回答
1

虽然这个错误确实有意义，但我不知道 TS 模板在哪里以及如何启动这样的代理服务器（如果有的话）。

它没有。我只是花了很长时间追逐我的尾巴来弄清楚这个魔法......它是 create-react-app: create-react-app docs

如果代理选项对您来说不够灵活，您可以直接访问 Express 应用程序实例并连接您自己的代理中间件。

您可以将此功能与 package.json 中的 proxy 属性结合使用，但建议您将所有逻辑合并到 src/setupProxy.js 中。

接下来，创建 src/setupProxy.js 并将以下内容放入其中：

This github issue about what they have changed and why还提供了更多的背景信息，但老实说，目前它完全是一团糟。我希望我只是在 .NET 5 上做了一个水疗中心，而不是在所有这些混乱中拖网

于 2022-01-26T16:53:18.717 回答