## 前言 一開始是一個自用的應用，原本是用razor寫的。最近有了點新想法，加點新功能，但是我接觸的項目基本都是vue+api的前後端分離，用這razor寫的是真不習慣，最後決定還是用習慣的vue重寫。 之前嘗試過在.net core里使用vue2+webpack，畢竟實際上就是把.vue翻譯成了 ...
前言
一開始是一個自用的應用，原本是用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即可）。
擴展里總結了一些內容，發現這裡基本上都有
