在asp.net core中使用vue3+vite（起）-Toy模板网

这篇具有很好参考价值的文章主要介绍了在asp.net core中使用vue3+vite（起）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

一开始是一个自用的应用，原本是用razor写的。最近有了点新想法，加点新功能，但是我接触的项目基本都是vue+api的前后端分离，用这razor写的是真不习惯，最后决定还是用习惯的vue重写。

之前尝试过在.net core里使用vue2+webpack，毕竟实际上就是把.vue翻译成了.js来用，一个站点就能跑。但是vite不同于webpack的实在想不到怎么弄到.net core里来。

另外我的前端不太行，对于vue基本上只会写，不会搭。有些东西搞错了敬请谅解。

起

环境

.net 6
pnpm 8.6.1
Visual Studio 2022 17.4

步骤

创建新项目，使用React的模板：
ClientApp文件夹下，就是React相关的内容，删掉这个文件夹，然后在项目目录下执行
pnpm create vite 参考官网，Project Name就用ClientApp（可以改，但是没必要，不然相应的.net core的部分也要改）然后后面选择vue + typescript，直接一手鸠占鹊巢
打开项目文件.csproj，可以看到内容比普通的项目文件多很多。
- <SpaRoot>[SpaRoot]</SpaRoot>，可以看到这里就是ClientApp，如果上面创建project name不是ClientApp，这里就要相应的修改了
- <SpaProxyServerUrl>[SpaProxyServerUrl]</SpaProxyServerUrl>，这里面的[SpaProxyServerUrl]就是vue运行用的url，把port改成vite默认的5173，即可。当vite.config.ts中配置了其他端口时，这里要与之一致。
- <SpaProxyLaunchCommand>[SpaProxyLaunchCommand]</SpaProxyLaunchCommand>，运行用的命令，这里npm start是原react模板生成的package.json里的；现在换成pnpm run dev即可
- <DistFiles Include="$(SpaRoot)build\**" /> 改成<DistFiles Include="$(SpaRoot)dist\**" />

3.5 若项目目录下没有wwwroot文件夹，手动创建。

4.调试运行：会先后启动2个站点，一个是.net core，一个是vue。

5.发布：正常生成发布文件即可。

扩展

首先，调试运行会出现一个cmd，执行了pnpm run dev([SpaProxyLaunchCommand])，而Program.cs 里的

app.UseStaticFiles();
// ....
app.MapFallbackToFile("index.html");

这两句代码，前者对应的wwwroot文件夹是空的，后者需要的index.html更是不存在(wwwroot)，那么我对这两句代码进行一个释的注，调试运行果然依然正常。

然后是这个 Microsoft.AspNetCore.SpaProxy 。从Program.cs没有这个库的一丝踪迹，应该是写在什么了看不见的地方。
在 ASP.NET Core 中使用承载启动程序集

通过 IHostingStartup（承载启动）实现，在启动时从外部程序集向应用添加增强功能。例如，外部库可使用承载启动实现为应用提供其他配置提供程序或服务。。

而通过调试运行的时候，可以看到是net core的站点会先显示Launching the SPA proxy...，然后跳转到vue站点。但是发布运行，却是直接显示vue的首页。我直接对发布包里的Microsoft.AspNetCore.SpaProxy.dll进行一个除的删，果然站点仍然能够正常运行。

小结

在调试运行时，通过Microsoft.AspNetCore.SpaProxy支持站点运行。（确切的来说是Microsoft.AspNetCore.SpaProxy后台又会去调用SpaProxyLaunchCommand来启动了一个dev server，并重定向他）
生成发布包后，通过app.UseStaticFiles();就可以支持站点运行（访问/index.html即可）。

反过来说，如果你在dev模式下，手动执行来启动站点，是可以无视Microsoft.AspNetCore.SpaProxy的。而生成发布文件之后，只需要app.UseStaticFiles();即可，更是与这个项目模板无关。所以就算是不使用这个项目模板，也能达到前端页面和后端API在同一个站点的效果（发布时）。

扩展里总结了一些内容，发现这里基本上都有😂 ASP.NET Core 中的单页应用程序 (SPA) 概述