在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

步骤

1. 创建新项目，使用React的模板：
   

2. ClientApp文件夹下，就是React相关的内容，删掉这个文件夹，然后在项目目录下执行
   pnpm create vite 参考官网，Project Name就用ClientApp（可以改，但是没必要，不然相应的.net core的部分也要改）然后后面选择vue + typescript，直接一手鸠占鹊巢

3. 打开项目文件.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即可）。

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

转（可跳过）

发现了官方的模板，康康有什么不一样的。

安装了 ASP.NET 和 Web 开发工作负载的 Visual Studio 2022 版本 17.5 或更高版本

这也是开头我为什么标注的我的VS版本，因为没有这个模板，绕了一小圈，不会有现成的吧...

探索

更新之后果然有了，前2个是之前就有的，相当于普通的vue项目，开始创建

1. 这里是解决方案名称，以往都是项目名称，看来结构上就不大一样了
   

2. 提示vue不是内部或外部命令....，需要全局安装，注意这里用的是vue3，所以安装了以前vue2的 vue-cli 在后面创建的时候会失败

3. 这里的创建挺耗时的，最后生成的还是2个项目
   

4. 运行：启动站点，但是并没有自行运行vue，所以vue的部分需要手动去执行命令。

5. 发布：需要分别生成发布文件。

小结

？？？好像这个vueapp和之前的独立vue项目没啥大区别，2个项目各论各的，基本没有什么关联。不比SPA的，至少生成、运行、发布的时候顺带一起做了。而且官方这个用的@vue/cli，也不符我们这篇题意。

不过这个模板也只是预览版