在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) 概述
转（可跳过）
发现了官方的模板，康康有什么不一样的。
安装了 ASP.NET 和 Web 开发工作负载的 Visual Studio 2022 版本 17.5 或更高版本
这也是开头我为什么标注的我的VS版本，因为没有这个模板，绕了一小圈，不会有现成的吧...
探索
更新之后果然有了，前2个是之前就有的，相当于普通的vue项目，开始创建
-
这里是解决方案名称，以往都是项目名称，看来结构上就不大一样了
-
提示vue不是内部或外部命令....，需要全局安装，注意这里用的是vue3，所以安装了以前vue2的 vue-cli 在后面创建的时候会失败
-
这里的创建挺耗时的，最后生成的还是2个项目
-
运行：启动站点，但是并没有自行运行vue，所以vue的部分需要手动去执行命令。
-
发布：需要分别生成发布文件。
小结
？？？好像这个vueapp和之前的独立vue项目没啥大区别，2个项目各论各的，基本没有什么关联。不比SPA的，至少生成、运行、发布的时候顺带一起做了。而且官方这个用的@vue/cli，也不符我们这篇题意。
不过这个模板也只是预览版
