在VS 2019 Preview中,您有多个模板。我对以下两个感兴趣:
我玩了一会儿,我观察到了不同之处。在ASP.NET Core with React.js
模板中,启动了SPA代理服务器,而在ASP.NET Core with React.js and Redux
中,仅在没有SPA代理服务器的情况下工作(第二个模板是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");
}
});
}
我还观察到,在JS ClientApp
中有一个setupProxy.js
文件,而在TS ClientApp
中没有。此外,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模板的行为吗?如果是,如何进行?如果不是,原因何在?
3条答案
按热度按时间unguejic1#
我不知道TS模板在哪里以及如何启动这样一个代理服务器,如果它有的话。
这就是
spa.UseReactDevelopmentServer(npmScript: "start")
为您所做的。查看package.json
,您将看到start
脚本在端口5002上启动代理服务器。nfs0ujit2#
虽然这个错误是有意义的,但我不知道TS模板在哪里以及如何启动这样一个代理服务器,如果它确实这样做的话。
不是的。我只是花了很长时间才发现这个魔法。它是create-react-app:create-react-app文档
如果代理选项对您来说不够灵活,您可以直接访问Express应用程序示例并连接您自己的代理中间件。
您可以将此特性与package.json中的proxy属性结合使用,但建议您将所有逻辑合并到src/setupProxy.js中。
接下来,创建src/setupProxy.js并将以下内容放入其中:
This github issue关于他们改变了什么以及为什么改变也提供了更多的背景,但老实说,这是一个完全混乱的时刻。我希望我只是在.NET5上做了一个spa,而不是在这些乱七八糟的东西中搜寻
uajslkp63#
1.创建“ASP.NET Core Web API”项目
1.在launchSettings中将https.applicationUrl设置为“https://localhost:3000; http://localhost:3001”
1.将WeatherForecastController从[Route(“[controller]”)]更改为[Route(“API/[controller]”)]
1.将ClientApp文件夹添加到解决方案
1.在ClientApp中运行>npm create vite@latest并选择模板(react/vue/etc)
1.用以下代码更新vite.config.ts。这将在https://localhost:5000上运行前端,在https://localhost:5000/api上运行后端,后者代理到https://localhost:3000/api
1.现在你可以重新启动你的后端,而不必启动/停止前端或与微软SpaProxy废话混乱。