跳到主要內容

Vue CLI move to Vite

最近將前陣子用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 完整性更高。

ViteVue 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的方法:

  1. 使用 NuGet管理員安裝 Microsoft.AspNetCore.Authentication.Negotiate 
  2. 在 Startup.cs 的 ConfigureServices 方法加入 services.AddAuthentication(NegotiateDefaults.AuthenticationScheme).AddNegotiate();
  3. 在 Startup.cs 的 ConfigureServices 方法加入 app.UseAuthorization();

去年剛接觸到 Vite 時就想改出自己的範本,無奈功力不足在實際使用時遇到許多問題,非常佩服這位作者花時間去做出完整的範本。原本看名字MakotoAtsu以為是日本人,查了他的Github再連結到Linkedin才知道是位臺灣人,讚啦!

留言

這個網誌中的熱門文章

自然人憑證讀卡機驅動程式

鳥毅用的是第一代的自然人憑證讀卡機,EZ100PU(後來有同事買EZmini可以讀SIM卡似乎更好),每年報稅時用一次。 本來只是要申請些政府業務,一時之間找不到光碟,沒想到在 驅動程式下載 居然看到Linux和Mac的驅動程式,剩下的就是政府單位的網頁和程式應該改版了吧!!!

DBeaver 介面語言

DBeaver是我個人頗常用的一套跨平台Database管理工具,最近升級後發現Windows版本居然變成簡體中文,而且無法切換為英文。

在Windows Server設定L2TP over IPSec VPN

簡單地說,macOS Sierra與iOS 10發表後,大家忽然發現Apple不再支援PPTP,所以一定得設定其他的VPN型態。若不要另外裝client,用L2TP是最方便的,SSL VPN雖然好,但若沒有安裝Agent要連線到任一電腦或是非網頁服務還是挺麻煩的。