.net 打造前后端不分离系统

前后端分离系统优点确实很多，比如只需一个后台服务，手机APP，web，PC端都可以使用这一个后台服务。但是如果我只想做一个简单的验证页面，想快速落地，前后端分离就有点麻烦了，也没这个必要。当然了，前后端不分离系统其实很成熟了，就拿.net 技术栈来讲，Blazor就可以很快实现，但是我们不得不承认Blazor的生态相对Vue、React等前端框架来讲，还是差很多。很多时候，很多开源的前端框架我们稍微改动下就可以完全实现我们想要的功能，不必再用Blazor再在写一遍或者各种套壳起来。今天我们就说一下使用纯HTML或者VUE等前端框架+.net web mini api如何做一个前后端不分离系统。

思路

思路相当简单，使用 .NET 路由系统处理前端路由即可。

app.UseStaticFiles();

app.MapFallbackToFile("index.html");

就这两句，加上就搞定

实操

1. 为了方便演示，我就做一个index.html页面即可，其实使用vue或者react一样，最后也是build打包，入口也是index.html。

做了好玩的东西，效果图如下，忽略值得注意的是，前端的页面请求直接const response = await fetch("/test");，像这样直接写后端的路由就好，因为前后端都不分离了，也就不存在跨域啥的了。

2. 在.net web mini API项目中新建目录wwwroot，将index.html放入，然后加上，一定要注意中间件的顺序

var app = builder.Build();
app.UseStaticFiles("/wwwroot");
....
...
app.MapFallbackToFile("index.html"); 
app.Run();

在.net 6之前，对于spa的页面，还需要加上app.UseSpa()，它主要的作用是当服务器收到一个无法匹配到现有 API 或静态文件的请求时，自动返回 index.html，让前端路由接管。

但是.net6之后，简化了这个操作，直接使用app.MapFallbackToFile("index.html");搞定就可以。

一般使用前端框架打包后，都是生成在dist目录下，可以这样设置

var app = builder.Build();
app.UseStaticFiles("/wwwroot/dist");
....
...
app.MapFallbackToFile("dist/index.html"); //其实直接写index.html也行，只不过访问时要在地址栏加上index.html。
app.Run();