在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]，可以看到这里就是ClientApp，如果上面创建project name不是ClientApp，这里就要相应的修改了
    
  • [SpaProxyServerUrl]，这里面的[SpaProxyServerUrl]就是vue运行用的url，把port改成vite默认的5173，即可。当vite.config.ts中配置了其他端口时，这里要与之一致。
    
  • [SpaProxyLaunchCommand]，运行用的命令，这里npm start是原react模板生成的package.json里的；现在换成pnpm run dev即可
    
  • 改成
    
  
  

3.5 若项目目录下没有wwwroot文件夹，手动创建。
4.调试运行：会先后启动2个站点，一个是.net core，一个是vue。
5.发布：正常生成发布文件即可。
扩展

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

1. app.UseStaticFiles();
2. // ....
3. 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即可）。

扩展里总结了一些内容，发现这里基本上都有
来源:https://www.cnblogs.com/sigeer0-o/archive/2023/07/05/17526285.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！