最近將前陣子用Vue CLI寫的專案改為Vite，之所以能順利進行主要是找到了一位高手做的Template： AspNetCore_Vite_Starter 。
此範本類似 Vue JS 3.0 with .NET 5 Web API ，都是採用 .Net Web API + MVC 的方式，再把 Request Proxy導向 Vite 去 debug，因此可以將 Web API 與 Vue CLI/Vite 放在同一個專案，也就可以採用 Windows Authentication 而不會產生認證問題或是 CORS 問題，這也是企業內使用ASP.Net Web API搭配SPA開發時遇到最大的問題。而且 AspNetCore_Vite_Starter 裡的 Vite專案使用TypeScript，把需要的設定都搞定，我可以很無腦的直接把舊專案放進去，沒有遇到奇奇怪怪的問題。同時它還使用了 https 與 http 並存的方式，只要匯入憑證到企業信任就可以使用https開發，比起 Vue JS 3.0 with .NET 5 Web API 完整性更高。
Vite與Vue CLI最大的差別就在於開發時期Vite使用ESM(ECMAScript modules)去直接執行JavaScript，也就是依賴瀏覽器去執行，不需要另外使用WebPack再重新編譯打包重組JavaScript，所以在開發時非常愉快；但問題也在於沒有使用WebPack，所以之前用的process.env變數就不能使用，得改用 import.meta.env ，詳見 Env Variables and Modes。
AspNetCore_Vite_Starter 使用 .Net 5.0 ，我想是為了 Visual Studio 2019 的相容性，想要使用 .Net 6.0 只要自己對專案升級就行。最後，附上如何使用 Windows Authentication的方法：
- 使用 NuGet管理員安裝 Microsoft.AspNetCore.Authentication.Negotiate
- 在 Startup.cs 的 ConfigureServices 方法加入 services.AddAuthentication(NegotiateDefaults.AuthenticationScheme).AddNegotiate();
- 在 Startup.cs 的 ConfigureServices 方法加入 app.UseAuthorization();
去年剛接觸到 Vite 時就想改出自己的範本，無奈功力不足在實際使用時遇到許多問題，非常佩服這位作者花時間去做出完整的範本。原本看名字MakotoAtsu以為是日本人，查了他的Github再連結到Linkedin才知道是位臺灣人，讚啦！
留言