在2022年寫過一篇Vue CLI move to Vite，裡頭提到高手MakotoAtsu寫的範本，但後來沒有更新就很可惜。現在微軟終於在 Visual Studio 2022內建 Vue 範本，並且使用Vite與Web API，完全滿足我們程序猿的需求。
在 File -> New -> Project 跳出視窗後，Keyword輸入Vue，就會看到不少Template
圖一 ：選擇範本
我個人偏好 TypeScript，所以選『Vue and ASP.NET Core』+ TypeScript 的範本
接下來就會真正的Create Project，輸入專案名即可，這裡強烈建議要選 Create in new folder
圖二：產生專案
接下來設定選項
圖三：專案屬性
我個人不愛使用 top-level statements，所以會特別移除此選項
圖四：專案結構
在這裡可以看到和以往的範本不同，徹底將Client與Server分為二個不同的project，這樣在開發時比較方便，Client端直接使用 VS Code 開發，而Server端繼續使用 VS 2022。
順便解說一下它的原理，主要是 Server 會透過 Proxy 將 http/https request 發到 Client 的 port，只有API 的部分自己處理。
那麼 Client 端的 Port 寫在哪裡呢? 有3個檔案，第一個是 vite.config.ts ，若選 JavaScript的專案，此處就是 vite.config.js 。
圖五：指定Client Port
在 vite.config.ts 最底下可以看到 client的port，同檔案前一點會看到api的port。
接下來第二個地方是 .vscode目錄下的 launch.json
圖六： launch.json
這張圖裡顯示一個錯誤，debug使用Microsoft Edge 的type應該是 "msedge"而不是 "edge"，表示當初建立範本的人根本都只在用chrome而沒有使用edge。😊
圖七：Server的 csproj 檔
我自己就是手賤，不喜歡亂數port，所以把這些地方全改掉，就可以用習慣的 5173 port開發。
留言