Tutorial: Erstellen einer ASP.NET Core-App mit Vue in Visual Studio

In diesem Artikel erfahren Sie, wie Sie ein ASP.NET Core-Projekt als API-Backend und ein Vue-Projekt als Benutzeroberfläche erstellen.

Derzeit enthält Visual Studio ASP.NET Core-SPA-Vorlagen (Single Page Application), die Angular, React und Vue unterstützen. Die Vorlagen stellen einen integrierten Client-App-Ordner in Ihren ASP.NET Core-Projekten bereit, der die Basisdateien und Ordner der einzelnen Frameworks enthält.

Sie können die in diesem Artikel beschriebene Methode verwenden, um Single-Page-Anwendungen von ASP.NET Core zu erstellen, für die Folgendes gilt:

• Platzieren Sie die Client-App in einem separaten Projekt außerhalb des ASP.NET Core-Projekts.
• Erstellen Sie das Clientprojekt basierend auf der auf Ihrem Computer installierten Framework-CLI.

Voraussetzungen

Stellen Sie sicher, dass Sie Folgendes installieren:

• Visual Studio 2022, Version 17.8 oder höher, mit installierter Workload für ASP.NET und Webentwicklung. Sie können die Visual Studio 2022 Vorschauversion von der Seite Visual Studio-Downloads kostenlos herunterladen und installieren. Wenn Sie die Workload installieren müssen und bereits Visual Studio besitzen, navigieren Sie zu Extras>Extras und Funktionen abrufen… . Dadurch wird der Visual Studio-Installer geöffnet. Klicken Sie auf die Workload ASP.NET und Webentwicklung, und klicken Sie anschließend auf Ändern.
• npm (https://www.npmjs.com/), im Lieferumfang von Node.js enthalten.

Erstellen der Front-End-App

1. Wählen Sie im Startfenster (mit Datei>Startfenster öffnen) die Option Neues Projekt erstellen aus.

   

2. Suchen Sie in der Suchleiste oben nach Vue, und wählen Sie dann Vue und ASP.NET Core (Vorschau) mit JavaScript oder TypeScript als ausgewählte Sprache aus.

   

3. Nennen Sie das Projekt VueWithASP und wählen Sie dann Erstellen aus.

   Der Projektmappen-Explorer zeigt die folgenden Projektinformationen an:

   

   Im Vergleich zur eigenständigen Vue-Vorlage werden einige neue und geänderte Dateien für die Integration mit ASP.NET Core angezeigt:

   • vite.config.json (geändert)
   • HelloWorld.vue (geändert)
   • package.json (geändert)

Festlegen der Projekteigenschaften

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf VueWithASP.Server und wählen Sie Eigenschaften aus.

   

2. Öffnen Sie auf der Eigenschaftenseite die Registerkarte Debuggen, und wählen Sie die Option UI für Debugstartprofile öffnen aus. Deaktivieren Sie die Option Browser starten für das Profil, das nach dem ASP.NET Core-Projekt (oder https, sofern vorhanden) benannt ist.

   

   Dieser Wert verhindert das Öffnen der Webseite mit den Quellwetterdaten.

   Hinweis

   In Visual Studio speichert launch.json die Starteinstellungen, die der Schaltfläche Start in der Debugsymbolleiste zugeordnet sind. Derzeit muss launch.json unter dem Ordner .vscode liegen.

Starten des Projekts

Drücken Sie zum Starten des Projekts F5 oder klicken Sie oben im Fenster auf die Schaltfläche Starten. Es werden zwei Eingabeaufforderungen angezeigt:

• Das ausgeführte ASP.NET Core-API-Projekt
• Die Vite CLI mit einer Meldung wie VITE v4.4.9 ready in 780 ms

Die Vue-App wird angezeigt und über die API aufgefüllt. Wenn die App nicht angezeigt wird, lesen Sie den Abschnitt Problembehandlung.

Veröffentlichen des Projekts

Ab Visual Studio 2022 17.3 können Sie die integrierte Lösung mit dem Visual Studio-Veröffentlichungstool veröffentlichen.

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das VueWithASP.Server-Projekt, und wählen Sie Projektreferenz>hinzufügen aus.

   Stellen Sie sicher, dass das Projekt vuewithasp.client ausgewählt ist.

2. Klicken Sie auf OK.

3. Klicken Sie erneut mit der rechten Maustaste auf das ASP.NET Core Projekt, und wählen Sie Projektdatei bearbeiten aus.

   Dadurch wird die CSPROJ-Datei für das Projekt geöffnet.

4. Aktualisieren Sie in der .csproj-Datei den Projektverweis, und fügen Sie das Element <ReferenceOutputAssembly> mit dem Wert false hinzu.

   Dieser Verweis sollte wie folgt aussehen.

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

5. Klicken Sie mit der rechten Maustaste auf das ASP.NET Core-Projekt, und wählen Sie dann Projekt neu laden aus, wenn diese Option verfügbar ist.

6. Stellen Sie in Program.cs sicher, dass der folgende Code vorhanden ist.

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

7. Klicken Sie zum Veröffentlichen mit der rechten Maustaste auf das ASP.NET Core-Projekt, und wählen Sie Veröffentlichen und dann die Optionen für das gewünschte Veröffentlichungsszenario (z. B. in Azure oder in einem Ordner) aus.

   Der Veröffentlichungsprozess dauert länger als für ein gewöhnliches ASP.NET Core-Projekt, da der Befehl npm run build beim Veröffentlichen aufgerufen wird. BuildCommand führt npm run build standardmäßig aus.

Problembehandlung

Proxyfehler

Es wird möglicherweise der folgende Fehler angezeigt:

[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)

Wenn dieses Problem angezeigt wird, wurde das Front-End wahrscheinlich vor dem Back-End gestartet. Sobald die Back-End-Eingabeaufforderung ausgeführt wird, aktualisieren Sie einfach die Vue-App im Browser.

Falls der Port bereits verwendet wird, erhöhen Sie die Portnummer um 1 in launchSettings.json und vite.config.js.

Datenschutzfehler

Möglicherweise wird folgender Zertifikatfehler angezeigt:

Your connection isn't private

Löschen Sie die Vue-Zertifikate aus %appdata%\local\asp.net\https oder %appdata%\roaming\asp.net\https, und versuchen Sie es dann erneut.

Überprüfen der Ports

Wenn die Wetterdaten nicht ordnungsgemäß geladen werden, müssen Sie möglicherweise auch überprüfen, ob Sie die richtigen Ports verwenden.

1. Stellen Sie sicher, dass die Portnummern übereinstimmen. Wechseln Sie zur Datei launchSettings.json in Ihrem ASP.NET Core-Projekt (im Ordner Eigenschaften). Rufen Sie die Portnummer aus der applicationUrl-Eigenschaft ab.

   Wenn mehrere applicationUrl-Eigenschaften vorhanden sind, suchen Sie mit einem https-Endpunkt nach einer. Dies sollte in etwa wie folgt aussehen: https://localhost:7142.

2. Navigieren Sie dann zur Datei vite.config.js für Ihr Vue-Projekt. Aktualisieren Sie die target-Eigenschaft, sodass sie mit der applicationUrl-Eigenschaft in launchSettings.json übereinstimmt. Nach der Aktualisierung sollte der Wert in etwa so aussehen:

   target: 'https://localhost:7142/',
   

Veraltete Version von Vue

Wenn die Konsolenmeldung Die Datei „C:\Users\Me\source\repos\vueprojectname\package.json“ wurde nicht gefunden beim Erstellen des Projekts angezeigt wird, müssen Sie möglicherweise Ihre Version der Vite CLI aktualisieren. Nachdem Sie die Vite CLI aktualisiert haben, müssen Sie möglicherweise auch die VUERC-Datei in C:\Users\[IhrProfilname] löschen.

Docker

Wenn Sie Docker-Unterstützung beim Erstellen des Web-API-Projekts aktivieren, wird das Back-End möglicherweise mithilfe des Docker-Profils gestartet und lauscht nicht am konfigurierten Port 5173. Behebung:

Bearbeiten Sie das Docker-Profil in launchSettings.json, indem Sie die folgenden Eigenschaften hinzufügen:

"httpPort": 5175, 
"sslPort": 5173  

Alternativ können Sie eine Zurücksetzung mit der folgenden Methode ausführen:

1. Legen Sie in den Projektmappeneigenschaften Ihre Back-End-App als Startprojekt fest.
2. Wechseln Sie im Menü „Debuggen“ das Profil über die Schaltfläche Start des Dropdownmenüs in das Profil für Ihre Back-End-App.
3. Setzen Sie dann in den Projektmappeneigenschaften die Einstellung auf mehrere Startprojekte zurück.

Nächste Schritte

Weitere Informationen zu SPA-Anwendungen in ASP.NET Core finden Sie unter Entwickeln von Single-Page-Apps. Der verlinkte Artikel bietet zusätzlichen Kontext für Projektdateien wie aspnetcore-https.js, auch wenn sich die Details der Implementierung aufgrund der Unterschiede zwischen den Projektvorlagen und dem Vue.js-Framework im Vergleich zu anderen Frameworks unterscheiden. Beispielsweise befinden sich die Vue-Dateien nicht in einem ClientApp-Ordner, sondern in einem separaten Projekt.

Für das Clientprojekt spezifische MSBuild-Informationen finden Sie unter MSBuild-Eigenschaften für JSPS.