共用方式為


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

在本文中,您將了解如何建置 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。

建立前端應用程式

  1. 在 [開始] 視窗中(選擇 [檔案>開始視窗] 以開啟),選取 [建立新專案]

    Screenshot showing Create a new project

  2. 在頂端的搜尋列中搜尋 Vue,然後選取 [Vue] 和 [ASP.NET Core (預覽)], 並以 JavaScript 或 TypeScript 作為選取的語言。

    Screenshot showing choosing a template.

  3. 將專案命名為 VueWithASP,然後選擇 [建立]

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

    Screenshot showing Solution Explorer.

    相較於獨立 Vue 範本,您會看到一些新的和已修改的檔案,以便與 ASP.NET Core 整合:

    • vite.config.json (已修改)
    • HelloWorld.vue (已修改)
    • package.json (已修改)

設定專案屬性

  1. 在 [方案總管] 中,以滑鼠右鍵按一下 VueWithASP.Server,然後選擇 [屬性]

    Screenshot showing Open project properties.

  2. 在 [屬性] 頁面中,開啟 [偵錯] 索引標籤,然後選取 [開啟偵錯啟動設定檔 UI] 選項。 取消核取以 ASP.NET Core 專案 (如果存在則為 HTTPs) 命名之設定檔的 [啟動瀏覽器] 選項。

    Screenshot showing Debug launch profiles UI.

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

    注意

    在 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 專案。

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

    請確保已選取 vuewithasp.client 專案。

  2. 選擇確定

  3. 再次以滑鼠右鍵按一下 ASP.NET Core 專案,然後選取 [編輯專案檔]

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

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

    此參考應如下所示。

     <ProjectReference Include="..\vuewithasp.client\vuewithasp.client.esproj">
       <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
     </ProjectReference>
    
  5. 以滑鼠右鍵按一下 ASP.NET Core 專案,並選擇 [重新載入專案] (如果該選項可用)。

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

    app.UseDefaultFiles();
    app.UseStaticFiles();
    
    // Configure the HTTP request pipeline.
    if (app.Environment.IsDevelopment())
    {
       app.UseSwagger();
       app.UseSwaggerUI();
    }
    
  7. 若要發佈,請以滑鼠右鍵按一下 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.jsonvite.config.js 中,將連接埠號碼遞增 1

隱私權錯誤

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

Your connection isn't private

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

驗證連接埠

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

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

    如果有多個 applicationUrl 屬性,請使用端點尋找一個 https 屬性。 看起來應該類似 https://localhost:7142

  2. 然後,移至 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  

或者,使用下列方法重設:

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

下一步

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

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