前言
一開(kāi)始是一個(gè)自用的應(yīng)用，原本是用razor寫(xiě)的。最近有了點(diǎn)新想法，加點(diǎn)新功能，但是我接觸的項(xiàng)目基本都是vue+api的前后端分離，用這razor寫(xiě)的是真不習(xí)慣，最后決定還是用習(xí)慣的vue重寫(xiě)。
之前嘗試過(guò)在.net core里使用vue2+webpack，畢竟實(shí)際上就是把.vue翻譯成了.js來(lái)用，一個(gè)站點(diǎn)就能跑。但是vite不同于webpack的實(shí)在想不到怎么弄到.net core里來(lái)。
另外我的前端不太行，對(duì)于vue基本上只會(huì)寫(xiě)，不會(huì)搭。有些東西搞錯(cuò)了敬請(qǐng)諒解。
起
環(huán)境
- .net 6
- pnpm 8.6.1
- Visual Studio 2022 17.4
步驟
-
創(chuàng)建新項(xiàng)目，使用React的模板：
-
ClientApp文件夾下，就是React相關(guān)的內(nèi)容，刪掉這個(gè)文件夾，然后在項(xiàng)目目錄下執(zhí)行
pnpm create vite參考官網(wǎng)，Project Name就用ClientApp（可以改，但是沒(méi)必要，不然相應(yīng)的.net core的部分也要改）然后后面選擇vue + typescript，直接一手鳩占鵲巢 -
打開(kāi)項(xiàng)目文件.csproj，可以看到內(nèi)容比普通的項(xiàng)目文件多很多。
-
<SpaRoot>[SpaRoot]</SpaRoot>，可以看到這里就是ClientApp，如果上面創(chuàng)建project name不是ClientApp，這里就要相應(yīng)的修改了 -
<SpaProxyServerUrl>[SpaProxyServerUrl]</SpaProxyServerUrl>，這里面的[SpaProxyServerUrl]就是vue運(yùn)行用的url，把port改成vite默認(rèn)的5173，即可。當(dāng)vite.config.ts中配置了其他端口時(shí)，這里要與之一致。 -
<SpaProxyLaunchCommand>[SpaProxyLaunchCommand]</SpaProxyLaunchCommand>，運(yùn)行用的命令，這里npm start是原react模板生成的package.json里的；現(xiàn)在換成pnpm run dev即可 -
<DistFiles Include="$(SpaRoot)build\**" />改成<DistFiles Include="$(SpaRoot)dist\**" />
-
3.5 若項(xiàng)目目錄下沒(méi)有wwwroot文件夾，手動(dòng)創(chuàng)建。
4.調(diào)試運(yùn)行：會(huì)先后啟動(dòng)2個(gè)站點(diǎn)，一個(gè)是.net core，一個(gè)是vue。
5.發(fā)布：正常生成發(fā)布文件即可。
擴(kuò)展
首先，調(diào)試運(yùn)行會(huì)出現(xiàn)一個(gè)cmd，執(zhí)行了pnpm run dev([SpaProxyLaunchCommand])，而Program.cs 里的
app.UseStaticFiles();
// ....
app.MapFallbackToFile("index.html");
這兩句代碼，前者對(duì)應(yīng)的wwwroot文件夾是空的，后者需要的index.html更是不存在(wwwroot)，那么我對(duì)這兩句代碼進(jìn)行一個(gè)釋的注，調(diào)試運(yùn)行果然依然正常。
然后是這個(gè) Microsoft.AspNetCore.SpaProxy 。從Program.cs沒(méi)有這個(gè)庫(kù)的一絲蹤跡，應(yīng)該是寫(xiě)在什么了看不見(jiàn)的地方。
在 ASP.NET Core 中使用承載啟動(dòng)程序集
通過(guò) IHostingStartup（承載啟動(dòng)）實(shí)現(xiàn)，在啟動(dòng)時(shí)從外部程序集向應(yīng)用添加增強(qiáng)功能。 例如，外部庫(kù)可使用承載啟動(dòng)實(shí)現(xiàn)為應(yīng)用提供其他配置提供程序或服務(wù)。。
而通過(guò)調(diào)試運(yùn)行的時(shí)候，可以看到是net core的站點(diǎn)會(huì)先顯示Launching the SPA proxy...，然后跳轉(zhuǎn)到vue站點(diǎn)。但是發(fā)布運(yùn)行，卻是直接顯示vue的首頁(yè)。我直接對(duì)發(fā)布包里的Microsoft.AspNetCore.SpaProxy.dll進(jìn)行一個(gè)除的刪，果然站點(diǎn)仍然能夠正常運(yùn)行。
小結(jié)
-
在調(diào)試運(yùn)行時(shí)，通過(guò)Microsoft.AspNetCore.SpaProxy支持站點(diǎn)運(yùn)行。（確切的來(lái)說(shuō)是Microsoft.AspNetCore.SpaProxy后臺(tái)又會(huì)去調(diào)用
SpaProxyLaunchCommand來(lái)啟動(dòng)了一個(gè)dev server，并重定向他） -
生成發(fā)布包后，通過(guò)
app.UseStaticFiles();就可以支持站點(diǎn)運(yùn)行（訪問(wèn)/index.html即可）。
反過(guò)來(lái)說(shuō)，如果你在dev模式下，手動(dòng)執(zhí)行來(lái)啟動(dòng)站點(diǎn)，是可以無(wú)視Microsoft.AspNetCore.SpaProxy的。而生成發(fā)布文件之后，只需要app.UseStaticFiles();即可，更是與這個(gè)項(xiàng)目模板無(wú)關(guān)。所以就算是不使用這個(gè)項(xiàng)目模板，也能達(dá)到前端頁(yè)面和后端API在同一個(gè)站點(diǎn)的效果（發(fā)布時(shí)）。
擴(kuò)展里總結(jié)了一些內(nèi)容，發(fā)現(xiàn)這里基本上都有?? ASP.NET Core 中的單頁(yè)應(yīng)用程序 (SPA) 概述
轉(zhuǎn)（可跳過(guò)）
發(fā)現(xiàn)了官方的模板，康康有什么不一樣的。
安裝了 ASP.NET 和 Web 開(kāi)發(fā)工作負(fù)載的 Visual Studio 2022 版本 17.5 或更高版本
這也是開(kāi)頭我為什么標(biāo)注的我的VS版本，因?yàn)闆](méi)有這個(gè)模板，繞了一小圈，不會(huì)有現(xiàn)成的吧...
探索
更新之后果然有了，前2個(gè)是之前就有的，相當(dāng)于普通的vue項(xiàng)目，開(kāi)始創(chuàng)建
-
這里是解決方案名稱(chēng)，以往都是項(xiàng)目名稱(chēng)，看來(lái)結(jié)構(gòu)上就不大一樣了
-
提示vue不是內(nèi)部或外部命令....，需要全局安裝，注意這里用的是vue3，所以安裝了以前vue2的 vue-cli 在后面創(chuàng)建的時(shí)候會(huì)失敗
-
這里的創(chuàng)建挺耗時(shí)的，最后生成的還是2個(gè)項(xiàng)目
-
運(yùn)行：?jiǎn)?dòng)站點(diǎn)，但是并沒(méi)有自行運(yùn)行vue，所以vue的部分需要手動(dòng)去執(zhí)行命令。
-
發(fā)布：需要分別生成發(fā)布文件。
小結(jié)
？？？好像這個(gè)vueapp和之前的獨(dú)立vue項(xiàng)目沒(méi)啥大區(qū)別，2個(gè)項(xiàng)目各論各的，基本沒(méi)有什么關(guān)聯(lián)。不比SPA的，至少生成、運(yùn)行、發(fā)布的時(shí)候順帶一起做了。而且官方這個(gè)用的@vue/cli，也不符我們這篇題意。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-521791.html
不過(guò)這個(gè)模板也只是預(yù)覽版文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-521791.html
到了這里，關(guān)于在asp.net core中使用vue3+vite（起）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
