教學課程：在 Visual Studio 中使用 Vue 建立 ASP.NET Core 應用程式

發行項
12/08/2023

在本文中，您將了解如何建置 ASP.NET Core 專案，以作為 API 後端，以及要作為 UI 的 Vue 專案。

Visual Studio 包含 ASP.NET 支援 Angular、React 和 Vue 的核心單頁應用程式 (SPA) 範本。範本會在您的 ASP.NET Core 專案中提供內建的用戶端應用程式資料夾，其中包含每個架構的基底檔案和資料夾。

您可以使用本文所述的方法來建立 ASP.NET 核心單頁應用程式：

將用戶端應用程式放在與 ASP.NET Core 專案以外的個別專案中
根據電腦上安裝的 Framework CLI 建立用戶端專案

注意

本文描述使用 Visual Studio 2022 版本 17.8 中更新的範本之專案建立程序，其使用 Vite CLI。

必要條件

請務必安裝下列項目：

已安裝具有 ASP.NET 與網頁程式開發工作負載的 Visual Studio 2022 17.8 版或更新版本。移至 Visual Studio 下載頁面以免費安裝。如果您需要安裝工作負載，且已安裝 Visual Studio，請移至 [工具]> [取得工具與功能...]，以開啟 Visual Studio 安裝程式。選擇 [ASP.NET 與網頁程式開發] 工作負載，然後選擇 [修改]。
npm (https://www.npmjs.com/)，其隨附於 Node.js。

建立前端應用程式

在 [開始] 視窗中(選擇 [檔案>開始視窗] 以開啟)，選取 [建立新專案]。
在頂端的搜尋列中搜尋 Vue，然後選取 [Vue] 和 [ASP.NET Core (預覽)]，並以 JavaScript 或 TypeScript 作為選取的語言。
將專案命名為 VueWithASP，然後選擇 [建立]。

[方案總管] 會顯示下列專案資訊：

相較於獨立 Vue 範本，您會看到一些新的和已修改的檔案，以便與 ASP.NET Core 整合：
- vite.config.json (已修改)
- HelloWorld.vue (已修改)
- package.json (已修改)

設定專案屬性

在 [方案總管] 中，以滑鼠右鍵按一下 VueWithASP.Server，然後選擇 [屬性]。
在 [屬性] 頁面中，開啟 [偵錯] 索引標籤，然後選取 [開啟偵錯啟動設定檔 UI] 選項。取消核取以 ASP.NET Core 專案 (如果存在則為 HTTPs) 命名之設定檔的 [啟動瀏覽器] 選項。

此值可防止使用來源天氣資料開啟網頁。

注意

在 Visual Studio 中，launch.json 會在 [偵錯] 工具列中儲存與 [開始] 按鈕相關聯的啟動設定。 launch.json 目前必須位於 .vscode 資料夾底下。

啟動專案

請按 F5 或選取視窗頂端的 [開始] 按鈕，以啟動應用程式。兩個命令提示字元隨即出現：

執行 ASP.NET 核心 API 專案
顯示訊息的 Vite CLI，例如 VITE v4.4.9 ready in 780 ms

注意

請檢查訊息的主控台輸出。例如，可能會有更新 Node.js 的訊息。

Vue 應用程式隨即出現，並會透過 API 填入。如果您沒有看到應用程式，請參閱疑難排解。

發佈專案

從 Visual Studio 2022 17.3 版開始，您可以使用 Visual Studio 發佈工具發佈整合式解決方案。

注意

若要使用發佈，請使用 Visual Studio 2022 17.3 版或更新版本建立 JavaScript 專案。

在 [方案總管] 中，以滑鼠右鍵按一下 VueWithASP.Server 專案，然後選取 [新增]>[專案參考]。

請確保已選取 vuewithasp.client 專案。
選擇確定。
再次以滑鼠右鍵按一下 ASP.NET Core 專案，然後選取 [編輯專案檔]。

這會開啟專案的 .csproj 檔案。

在 .csproj 檔案中，請確保專案參考包含值設定為 false 的 <ReferenceOutputAssembly> 元素。

此參考應如下所示。

 <ProjectReference Include="..\vuewithasp.client\vuewithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>

以滑鼠右鍵按一下 ASP.NET Core 專案，並選擇 [重新載入專案] (如果該選項可用)。

在 Program.cs 中，請確保存在以下程式碼。

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

若要發佈，請以滑鼠右鍵按一下 ASP.NET Core 專案，選擇 [發佈]，然後選取符合您所需發佈案例的選項，例如 Azure、發佈至資料夾等等。

發佈程式花費的時間比只針對 ASP.NET Core 專案花費更多時間，因為發佈時會叫用 npm run build 命令。 BuildCommand 預設會執行npm run build。

疑難排解

Proxy 錯誤

您可能會看到下列錯誤：

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5173 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

如果您看到此問題，很可能是前端在後端之前啟動。一旦您看到後端命令提示字元啟動並執行之後，只要在瀏覽器中重新整理 Vue 應用程式即可。

否則，如果埠正在使用中，請嘗試在 launchSettings.json 和 vite.config.js 中，將連接埠號碼遞增 1。

隱私權錯誤

您可能會看到下列憑證錯誤：

Your connection isn't private

請嘗試從 %appdata%\local\asp.net\HTTPs 或 %appdata%\roaming\asp.net\HTTPs刪除 Vue 憑證，然後再試一次。

驗證連接埠

如果天氣資料未正確載入，您可能也需要確認您的連接埠是否正確無誤。

請確定連接埠號碼相符。移至 ASP.NET Core 專案中的 launchSettings.json 檔案 (在 Properties 資料夾中)。從 applicationUrl 屬性取得連接埠號碼。

如果有多個 applicationUrl 屬性，請使用端點尋找一個 https 屬性。看起來應該類似 https://localhost:7142。
然後，移至 Vue 專案的 vite.config.js 檔案。更新 target 屬性，以符合 launchSettings.json中的 applicationUrl 屬性。當您更新它時，該值看起來應該會像這樣：
```
target: 'https://localhost:7142/',
```

Vue 的過時版本

如果您在建立專案時看到主控台訊息找不到檔案 'C：\Users\Me\source\repos\vueprojectname\package.json'，您可能需要更新 Vite CLI 的版本。更新 Vite CLI 之後，您可能也需要在 C:\Users\[yourprofilename] 中刪除 .vuerc 檔案。

Docker

如果您在建立 Web API 專案時啟用 Docker 支援，後端可能會使用 Docker 設定檔啟動，而不會接聽設定的連接埠 5173。解決方式：

藉由新增下列屬性，在 launchSettings.json 中編輯 Docker 設定檔：

"httpPort": 5175, 
"sslPort": 5173

或者，使用下列方法重設：

在 [方案屬性] 中，將後端應用程式設定為啟始專案。
在 [偵錯] 功能表中，使用 [開始] 按鈕下拉式功能表將設定檔切換至後端應用程式的設定檔。
接下來，在 [方案] 屬性中，重設為多個啟始專案。

下一步

如需 ASP.NET Core 中 SPA 應用程式的詳細資訊，請參閱開發單頁應用程式。連結的文章提供專案檔的其他內容，例如 aspnetcore-https.js，雖然實作的詳細資料因專案範本與 Vue.js 架構與其他架構之間的差異而有所不同。例如，Vue 檔案會包含在個別專案中，而不是 ClientApp 資料夾。

如需用戶端專案特定的 MSBuild 資訊，請參閱 JSPS 的 MSBuild 屬性。