.NET Core React Antd Pro脚手架如何快速搭建项目？

本文共计1240个文字，预计阅读时间需要5分钟。

朋友有个小项目的需求，想用.NET Core做后端，前端使用React+Antd+Pro，比较正常的后端分离项目需求。研究了下发现dotnet项目模板自带react框架，可以直接使用。

朋友有个小项目的需求，想要用.NET Core 做后端，

前端使用React Antd Pro，比较正常的前后端分离项目需求。

研究了一下发现dotnet 项目模板里面自带react框架，是可以直接使用的。

PS：非服务端渲染，这里只是使用了Statis File中间件发布了前端页面。

框架依赖

• dotnet core sdk 5.0
• node 14.0 + npm

➜ RCTableAdminTemplate git:(master) dotnet new 正在准备... 模板名 短名称 语言 标记 -------------------------------------------- -------------- ---------- ---------------------- Console Application console [C#],F#,VB Common/Console Class library classlib [C#],F#,VB Common/Library Worker Service worker [C#],F# Common/Worker/Web MSTest Test Project mstest [C#],F#,VB Test/MSTest NUnit 3 Test Item nunit-test [C#],F#,VB Test/NUnit NUnit 3 Test Project nunit [C#],F#,VB Test/NUnit xUnit Test Project xunit [C#],F#,VB Test/xUnit MVC ViewImports viewimports [C#] Web/ASP.NET Razor Component razorcomponent [C#] Web/ASP.NET MVC ViewStart viewstart [C#] Web/ASP.NET Razor Page page [C#] Web/ASP.NET Blazor Server App blazorserver [C#] Web/Blazor Blazor WebAssembly App blazorwasm [C#] Web/Blazor/WebAssembly ASP.NET Core Empty web [C#],F# Web/Empty ASP.NET Core Web App (Model-View-Controller) mvc [C#],F# Web/MVC ASP.NET Core Web App webapp [C#] Web/MVC/Razor Pages ASP.NET Core with React.js and Redux reactredux [C#] Web/MVC/SPA ASP.NET Core with Angular angular [C#] Web/MVC/SPA ASP.NET Core with React.js react [C#] Web/MVC/SPA Razor Class Library razorclasslib [C#] Web/Razor/Library ASP.NET Core Web API webapi [C#],F# Web/WebAPI ASP.NET Core gRPC Service grpc [C#] Web/gRPC dotnet gitignore file gitignore Config global.json file globaljson Config NuGet Config nugetconfig Config Dotnet local tool manifest file tool-manifest Config Web Config webconfig Config Solution File sln Solution Protocol Buffer File proto Web/gRPC Examples: dotnet new mvc --auth Individual dotnet new nunit dotnet new --help dotnet new mstest --help

在新文件下执行 “dotnet new react ” ，于是生成了以下项目

在这里可以看到

• ClientApp 为标准React前端项目
• 其他为正常的dotnet core项目文件

启动项目看一下

看起来基本没什么问题。

---

不过后端代码没有完整隔离在一个项目里面，看起来不太舒服，还是折腾一下。

所以，先搞个sln项目，在当前文件夹下面再创建一个src文件夹.

➜ DotnetReact dotnet new sln 已成功创建模板“Solution File”。 ➜ DotnetReact pwd /Users/liguobao/code/github.com/DotnetReact ➜ DotnetReact mkdir src

接着把所有的后端项目代码全部挪到src目录。

执行 "dotnet sln add src/DotnetReact.csproj "

项目文件到这里已经调整完成了。

但是，因为DotnetReact.csproj项目引用ClientApp有所变化，构建打包逻辑还需要调整一下。

打开DotnetReact.csproj文件。

找到 <SpaRoot>ClientApp\</SpaRoot> 节点，

将其修改为 <SpaRoot>..\ClientApp\</SpaRoot>

执行一下“dotnet build”，确认没什么问题，该有的数据都有了

➜ DotnetReact dotnet build . 用于 .NET 的 Microsoft (R) 生成引擎版本 16.11.2+f32259642 版权所有(C) Microsoft Corporation。保留所有权利。 正在确定要还原的项目… 已还原 /Users/liguobao/code/github.com/DotnetReact/src/DotnetReact.csproj (用时 181 ms)。 DotnetReact -> /Users/liguobao/code/github.com/DotnetReact/src/bin/Debug/net5.0/DotnetReact.dll DotnetReact -> /Users/liguobao/code/github.com/DotnetReact/src/bin/Debug/net5.0/DotnetReact.Views.dll 已成功生成。 0 个警告 0 个错误 已用时间 00:00:07.63

执行 ‘dotnet publish’， 发现打包有点问题 ：

后端DLL正常打包，

前端ClientApp项目构建正常，但是没被复制到发布目录。

认真研究了一波stackoverflow.com/questions/57526319/a-full-explanation-for-the-resolvedfiletopublish-xml-element之后确认，需要调整一下 ResolvedFileToPublish 配置。

将RelativePath调整为

<RelativePath>./publish/%(DistFiles.Identity)</RelativePath>

然后重新dotnet publish 构建，确认ClientApp正常构建

不过如果只设置这里，默认是publish到 debug/xxx/publish文件夹的，

比较合适的办法是设置一下默认发布文件夹

在 DotnetReact.csproj 文件<PropertyGroup>节点下新增 <PublishDir>..\release</PublishDir>

完整节点数据如下

<PropertyGroup> <TargetFramework>net5.0</TargetFramework> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion> <IsPackable>false</IsPackable> <SpaRoot>..\ClientApp\</SpaRoot> <PublishDir>..\release</PublishDir> <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes> </PropertyGroup>

然后再执行 dotnet publish 即可默认发布到release文件夹下，一切正常。

---

最后把整个前端项目替换成Antd Pro的项目代码即可。

---

完事。

完整代码可见：

GitHub - liguobao/RCTableAdminTemplate: RCTableAdminTemplate

PS: 包含Dockerfile + gitlab ci + k8s deployment 部署文件

编辑于 2022-04-12 21:10