前言
一开始是一个自用的应用，原本是用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支持站点运行。
生成发布包后，通过app.UseStaticFiles();就可以支持站点运行（访问/index.html即可）。
扩展里总结了一些内容，发现这里基本上都有
标签：core,vue,站点,asp,vite,vue3,net,运行 From： https://www.cnblogs.com/sigeer0-o/p/17526285.html