建立ASP.NET Core與Vue3的SPA專案

前言

由於前端Framework日新月異，剛好看到了Vue3，不過本身比較偏向於後端開發，又手癢想要用，就來研究一下如何整合，Visual Studio 2022目前只有內建React、Angular的SPA整合專案範例，就是沒有Vue的，動手來做一個也方便以後的自己來參考。

流程

建立一個React SPA專案
步驟很簡單打開Visual Studio 2022，選擇建立新專案，接著專案類型選擇Web，裡面有一個搭配 React.js的ASP.NET Core的專案範本，就選它，然後設定想要的專案名稱，就可以建立了，SDK的選擇，剛好有NET 7就先用最新的，在這邊專案先命名為dotnet7vue3SpaSimple方便識別。

Vue3前端專案建立
這邊有一些前置條件喔，請先安裝好Node.js，版本需要 > 16，這是Vue3的要求，接著我們進到dotnet7vue3SpaSimple專案資料夾裡，會看到ClientApp資料夾，將它刪除，然後需要下點指令了，可以使用vs code或者是windows terminal，這邊使用windows terminal，首先將路徑切到dotnet7vue3SpaSimple專案的資料夾，看得到被刪除的ClientApp資料夾的那一層，因為接下來要使用Vue在建立一個ClientApp的前端專案，使用vue官網推薦的指令來建立吧。
1
npm init vue@latest
接著會看到的是否允許安裝create-vue@3.5.0，裝下去就對了。
1
2
3
Need to install the following packages:
 create-vue@3.5.0
Ok to proceed? (y) y
接著會陸續提問，想建立的前端專案名稱以及相關設定，Project name請使用ClientApp。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
接著會出現提示指令，先做cd ClientApp跟npm install這兩個就好。
1
2
3
4
5
6
7
Scaffolding project in <your-project-path>

Done. Now run:

 cd ClientApp
 npm install
 npm run dev

Dotnet Core SpaProxy設定
打開dotnet7vue3SpaSimple的.csproj檔案，需要進行一些設定的調整，首先是設定vite啟動指令將npm start替換成npm run dev，沒錯就是剛剛的第三行指令。
1
<SpaProxyLaunchCommand>npm run dev</SpaProxyLaunchCommand>
接著紀錄一下，SpaProxyServerUrl裡面所使用的Port，稍後設定vite會使用到，
1
<SpaProxyServerUrl>https://localhost:44417</SpaProxyServerUrl>
還有一段就是publish需要用到的，把build替換為dist，vue打包輸出是使用dist資料夾。
1
<DistFiles Include="$(SpaRoot)dist\**" />

https設定
在建立dotnet7vue3SpaSimple如果有勾選https，需要再安裝一個套件，先回到windows terminal，安裝套件makecert。
1
npm install --save-dev vite-plugin-mkcert

vite設定

到ClientApp資料夾中，打開vite.config.js這個檔案，會看到下方的內容。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

接著要進行調整，首先是增加https的套件，接著設定server， port部分使用SpaProxyServerUrl中的port，server中的proxy，是用來對應後端的web api，將前端的/api都往指定的網址導向，所以target肯定就是設定dotnet core專案啟動時的url，所以我們到dotnet7vue3SpaSimple專案，裡面有一個launchSettings.json，這邊運行使用profiles，所以就是applicationUrl裡面有https的url， https://localhost:7208來當作target。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:45250",
      "sslPort": 44338
    }
  },
  "profiles": {
    "dotnet7vue3SpaSimple": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7208;http://localhost:5253",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    }
  }
}

最後設定完的vite.config.js如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import mkcert from 'vite-plugin-mkcert'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), mkcert()],
  server: {
    port: 44417,
    https: true,
    strictPort : true,
    proxy: {
      '/api' : {
        target: 'https://localhost:7208',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, '/api')
      }
    } 
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

啟動專案
現在我們可以用visual studio 2022 開啟dotnet7vue3SpaSimple， F5按下去，就可以啟動了，還會有一個vite啟動的command line出現，最後就會看到vue3前端專案啟動了。

小結

這裡使用ASP.NET Core加上Vue3建立一個SPA專案，雖然設定有些繁瑣，給未來的自己跟其他需要的人留下建立紀錄，其實就是怕自己忘光XD，還有就是vite啟動真的超快，有感提升開發體驗，建立的專案範例下方有參考連結。

GitHub Simple