建立 vscode asp.net core vue3 的整合型專案 - daniel-qa/RooCode GitHub Wiki

建立 vscode + asp.net core + vue3 的整合型專案

(ASP.NET Core + Vue 3 + UseProxyToSpaDevelopmentServer）就是目前最穩、最主流的「可以同時 Debug 前後端」的整合方式之一。

我們來一步一步完成它，這邊的方案是「前後端分離」，但由 ASP.NET Core 負責 serve Vue 應用與 API」，而不是完全獨立部署兩個伺服器。

  • 專案架構概覽
MyProject/
├── ClientApp/       ← Vue 3 前端應用
├── Controllers/     ← ASP.NET Core Web API 控制器
├── Program.cs
├── Startup.cs
└── MyProject.csproj

建立專案步驟

1. 使用 .NET CLI 建立 ASP.NET Core 專案 (backend)

dotnet new webapi -n MyProject
cd MyProject

dotnet new list 查到的範本名稱

範本名稱                                簡短名稱                    語言          標記
------------------------------------------------- -------------------------- ---------- ----------------------------------
ASP.NET Core Web API                        webapi                      [C#],F#     Web/Web API/API/Service

2. 建立 Vue 3 專案（使用 Vite）(Frontend)

前端 (Frontend) 資料夾一般會命名為 ClientApp

npm create vue@latest ClientApp

# 選擇：
# - Project name: ClientApp
# - Add TypeScript? ➝ 自選
# - Add ESLint / Router / Pinia ➝ 依需求
cd ClientApp
npm install

npm create vue@latest 是一個用於快速建立和設定一個新的 Vue.js 專案的指令。

設定 ASP.NET Core 來 Serve Vue 前端

4. 安裝中介套件支援 SPA（如 Vue）

在 MyProject.csproj 中加入：

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="7.0.0" />
</ItemGroup>

然後執行：

dotnet restore

5. 修改 Startup.cs 或 Program.cs

假設是 .NET 6 以上，編輯 Program.cs：

可以用原有版本，去問 GPT 要新增內容

var builder = WebApplication.CreateBuilder(args);

// 加入靜態檔案服務（給 Vue）
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist";
});

// 開發用 Swagger / OpenAPI
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Swagger 用於開發時
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

// redirect HTTPS
app.UseHttpsRedirection();

// 若不是開發模式，用來 serve Vue build 的靜態檔案
if (!app.Environment.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

// === 後端 API ===
var summaries = new[]
{
    "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};

app.MapGet("/weatherforecast", () =>
{
    var forecast = Enumerable.Range(1, 5).Select(index =>
        new WeatherForecast
        (
            DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            Random.Shared.Next(-20, 55),
            summaries[Random.Shared.Next(summaries.Length)]
        ))
        .ToArray();
    return forecast;
})
.WithName("GetWeatherForecast");

// === Vue 3 前端 ===
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        spa.UseProxyToSpaDevelopmentServer("http://localhost:5173");
    }
});

app.Run();

record WeatherForecast(DateOnly Date, int TemperatureC, string? Summary)
{
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}

建立 Vite Proxy 設定給 Vue 用

6. 在 ClientApp/vite.config.js 中加上 proxy：

import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://localhost:5001', // 根據你的後端 port 調整
        changeOrigin: true,
        secure: false,
      }
    }
  },
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

建立與測試

7. 開發模式（分開跑）

開一個 terminal，執行 ASP.NET Core： (後端)

dotnet run

再開一個 terminal，進入 ClientApp： (前端)

npm run dev

此時：

http://localhost:5173/ 是 Vue App

Vue 發送 /api 請求會 proxy 到 ASP.NET Core

8. 發行模式（一起打包）

cd ClientApp
npm run build
cd ..
dotnet publish -c Release

然後你可以用 IIS、Docker 或 Azure 部署整個應用。

一鍵啟動前後端

  • 用 VS Code 的 launch.json 和 tasks.json 組合起來，就可以做到 一鍵啟動前後端（ASP.NET Core + Vue 3） 的整合式開發體驗。

  • 概念說明

tasks.json：定義要執行的命令（如：dotnet run、npm run dev）

launch.json：定義除錯設定，可以同時啟動多個 task

步驟一：設定 tasks.json

建立 .vscode/tasks.json（如果還沒的話）：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "run-backend",
      "type": "process",
      "command": "dotnet",
      "args": ["run"],
      "problemMatcher": "$msCompile",
      "group": "build",
      "cwd": "${workspaceFolder}",
      "presentation": {
        "reveal": "silent"
      }
    },
    {
      "label": "run-frontend",
      "type": "process",
      "command": "npm",
      "args": ["run", "dev"],
      "problemMatcher": [],
      "group": "build",
      "cwd": "${workspaceFolder}/ClientApp",
      "presentation": {
        "reveal": "silent"
      }
    }
  ]
}

步驟二：設定 launch.json

建立或修改 .vscode/launch.json：

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Debug All",
      "configurations": ["ASP.NET Core", "Vue Dev Server"]
    }
  ],
  "configurations": [
    {
      "name": "ASP.NET Core",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "run-backend",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyProject.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    {
      "name": "Vue Dev Server",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "cwd": "${workspaceFolder}/ClientApp"
    }
  ]
}
  • 記得：

"program" 要換成你實際輸出的 DLL 路徑（可用 dotnet build 查）

ClientApp 是前端資料夾名稱，如果不同就換掉

✅ 使用方式

打開左側「執行與除錯」面板，選擇 Debug All，按下綠色播放鍵 ▶️，就會：

啟動 ASP.NET Core

啟動 Vue 開發伺服器

可同時斷點前後端

參考

  • tasks.json

tasks.json：這個檔案定義了 VS Code 任務，告訴 VS Code 該如何啟動和管理前端、後端、或其他的程式執行。

每個任務都有一個 label，用來區分任務的名稱。

在這裡，run-frontend 就是我們為啟動前端所設定的任務名稱。

tasks.json 裡，run-frontend 代表的任務是：

{
  "label": "run-frontend",
  "type": "process",
  "command": "npm",
  "args": ["run", "dev"],
  "problemMatcher": [],
  "group": "build",
  "presentation": {
    "reveal": "silent"
  },
  "options": {
    "cwd": "${workspaceFolder}/ClientApp"
  }
}

label：任務名稱，這裡是 run-frontend，用來識別這個任務。

type：這裡是 process，表示執行一個命令行程式。

command：執行的命令，這裡是 npm，用來運行 Node.js 的包管理器。

args：傳遞給 npm 的參數，這裡是 run dev，用來啟動 Vue 3 的開發模式。

options.cwd：定義了執行命令時的當前工作目錄，這裡設置為 ${workspaceFolder}/ClientApp，這樣 VS Code 就會在 ClientApp 資料夾內執行 npm run dev。

當你執行這個任務時，VS Code 會在 ClientApp 目錄下運行 Vue 前端應用程式的開發伺服器。

這是 tasks.json 裡的一個設定，並且可以與其他任務（如後端的 run-backend 任務）配合使用，實現一鍵啟動前後端開發環境的功能。

⚠️ **GitHub.com Fallback** ⚠️