Vue 和 ASP.NET Core Web API 專案整合(二)

2023-06-12 268 words 2 minutes

Contents

Vue 和 ASP.NET Core Web API 專案整合(二)

前一篇介紹WebApi與Vue兩個專案放在一起的架構。這篇介紹另一種架構，同一個方案底下，但分成Vue專案及Web Api專案兩個專案。同樣不使用Vue範本，一切均使用內建為主，逐步建立前後端分離的專案。與前篇相同的部分，會盡快帶過，節省時間與版面，如果造成不清楚的部分，請再來信告知。

專案架構

環境介紹

.NET Core 6

Vite

步驟一：創建 Vue 專案

新增專案，選擇 JavaScript 語言(或者選擇TypeScript)，因為是使用 Vite 方式新增 Vue 專案，所以任選一個輕量型作為起始點即可。

如果是使用 Vue Cli 方式，可以選擇內建的 獨立JavaScript Vue專案、Vue與ASP.NET Core

在專案內使用終端機指令，執行 Vite 指令

1

npm create vite@latest my-vue-app -- --template vue

將原本專案內的檔案全部刪掉，把 my-vue-app 資料夾內的檔案，移至外層，移除不需要的空資料夾
先執行 npm install 安裝Vue相關依賴

步驟二：創建 ASP.NET Core Web API 專案

新增 WebApi 專案
調整一下 Controllers 內的API

步驟三：執行測試

這邊跟整合(一)內容是一樣的，同樣是，先查看 ASP.NET Core Web API 專案中 launchSettings.json 內的 applicationUrl 的 IP。

在 Vue 專案中 vite.config.js，設置讀取 API 的代理。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        host: true,
        port: 5002,
        proxy: {
            '/api': {
                target: 'https://localhost:7032',
                changeOrigin: true,
                secure: false,
            },
        },
    },
})

測試 API 是否正常運行

1
2
3
4
5
6
7


fetch("/api/weatherForecast")
    .then(function (response) {
        return response.json();
    })
    .then(function (myJson) {
        console.log(myJson);
    });

步驟四：發佈與整合 ASP.NET Core Web API 和 Vue

整合時，因為屬於不同專案，所以要做一些設置

在 Vue專案，右鍵>屬性>組建，在生產環境建置命令輸入 npm run build，在組建輸出資料夾輸入 $(MSBuildProjectDirectory)\dist，如下圖
接著在WebApi專案上，加入Vue專案參考
此時如果直接發佈，會出現錯誤，提示 Vue 專案已卸載，所以我們要更新專案參考，點兩下Web專案開啟專案的 .csproj 檔案

更新專案參考

1
2
3
4
5


<ItemGroup>
	<ProjectReference Include="..\Demo2.ClientApp\Demo2.ClientApp.esproj">
	  <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
  </ProjectReference>
</ItemGroup>

設置完專案參考，回到 WebApi 專案，修改 Program.cs 文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
else
{
    app.UseDefaultFiles(); // Add
    app.UseStaticFiles(); // Add
}

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.MapFallbackToFile("index.html"); // Add

app.Run();

嘗試發佈，此時，發佈時就會看到先跑 Vue專案，並使用的npm build指令，查看發佈後的資料夾，就會看到 wwwroot資料夾，而資料夾內文件，與 Vue 專案內 dist文件夾的內容完全相同

總結

這是另一種 Vue 與 WebApi 整合的專案架構，這架構整合過程雖然並不如放在一起來的簡單，但可以額外帶來許多好處，除了前後端可以完整分開開發外，也可以透過 git submodule 或 git subtree 再度拆分專案，將前後端專案交由不同人處理。