Zelfstudie: Een ASP.NET Core-app maken met Vue in Visual Studio

In dit artikel leert u hoe u een ASP.NET Core-project bouwt om te fungeren als een API-back-end en een Vue-project om te fungeren als de gebruikersinterface.

Visual Studio bevat ASP.NET Spa-sjablonen (Core Single Page Application) die ondersteuning bieden voor Angular, React en Vue. De sjablonen bieden een ingebouwde map Client App in uw ASP.NET Core-projecten, waarin de basisbestanden en mappen van elk framework zijn opgenomen.

U kunt de methode die in dit artikel wordt beschreven, gebruiken om ASP.NET Core Single Page Applications te maken die:

• Plaats de client-app in een afzonderlijk project, buiten het ASP.NET Core-project
• Het clientproject maken op basis van de framework-CLI die op uw computer is geïnstalleerd

Notitie

In dit artikel wordt het proces voor het maken van projecten beschreven met behulp van de bijgewerkte sjabloon in Visual Studio 2022 versie 17.11, die gebruikmaakt van de Vite CLI. Vite bepaalt de versie van Vue met behulp van projectafhankelijkheden, zoals die zijn geconfigureerd in package.json.

Voorwaarden

Zorg ervoor dat u het volgende installeert:

• Visual Studio 2022 versie 17.11 of hoger met de ASP.NET en webontwikkeling workload geïnstalleerd. Ga naar de Visual Studio-downloadpagina om deze gratis te installeren. Als u de workload wilt installeren en Visual Studio al hebt, gaat u naar Tools>Hulpprogramma's en onderdelen ophalen..., waarmee het installatieprogramma van Visual Studio wordt geopend. Kies de ASP.NET- en webontwikkelingsworkload en kies vervolgens Wijzigen.
• npm (https://www.npmjs.com/), dat is opgenomen in Node.js.

De front-end-app maken

1. Selecteer in het Startvenster (kies Bestand>om het Startvenster te openen), Een nieuw project maken.

   

2. Zoek naar Vue in de zoekbalk bovenaan en selecteer vervolgens Vue en ASP.NET Core met JavaScript of TypeScript als de geselecteerde taal.

   

3. Noem het project VueWithASP- en selecteer vervolgens Volgende.

   Controleer dat Configureer voor HTTPS is ingeschakeld in het dialoogvenster Aanvullende informatie. Laat in de meeste scenario's de andere instellingen op de standaardwaarden staan.

4. Selecteer maken.

   Solution Explorer toont de volgende projectgegevens:

   

   In vergelijking met de zelfstandige Vue-sjabloonziet u enkele nieuwe en gewijzigde bestanden voor integratie met ASP.NET Core:

   • vite.config.json (gewijzigd)
   • HelloWorld.vue (gewijzigd)
   • package.json (gewijzigd)

De projecteigenschappen instellen

1. Klik in Solution Explorer met de rechtermuisknop op de VueWithASP.Server en kies Eigenschappen.

   

2. Open op de pagina Eigenschappen het tabblad Foutopsporing en selecteer Gebruikersinterface voor het starten van foutopsporingsprofielen openen optie. Deactiveer de optie Browser starten voor het https--profiel of het profiel dat vernoemd is naar het ASP.NET Core-project, indien aanwezig.

   

   Deze waarde voorkomt dat de webpagina wordt geopend met de bronweergegevens.

   Notitie

   In Visual Studio slaat launch.json de opstartinstellingen op die zijn gekoppeld aan de knop Start op de werkbalk Foutopsporing. Op dit moment moet launch.json zich onder de map .vscode bevinden.

3. Klik met de rechtermuisknop op de oplossing in Solution Explorer en selecteer Eigenschappen. Controleer of de opstartprojectinstellingen zijn ingesteld op Meerdere projectenen of de Actie voor beide projecten is ingesteld op Start .

Het project starten

Druk op F5 of selecteer de knop Start boven aan het venster om de app te starten. Er worden twee opdrachtprompts weergegeven:

• Het ASP.NET Core API-project dat wordt uitgevoerd
• De Vite CLI met een bericht zoals VITE v4.4.9 ready in 780 ms

Notitie

Controleer de console-uitvoer op berichten. Er kan bijvoorbeeld een bericht zijn om Node.jsbij te werken.

De Vue-app wordt weergegeven en wordt gevuld via de API (de localhost-poort kan afwijken van de schermopname).

Als u de app niet ziet, raadpleeg dan Probleemoplossing.

Het project publiceren

Vanaf Visual Studio 2022 versie 17.3 kunt u de geïntegreerde oplossing publiceren met het hulpprogramma Visual Studio Publish.

Notitie

Als u publiceren wilt gebruiken, maakt u uw JavaScript-project met Visual Studio 2022 versie 17.3 of hoger.

1. Klik in Solution Explorer met de rechtermuisknop op het project VueWithASP.Server en selecteer Projectverwijzing toevoegen>.

   Zorg ervoor dat het vuewithasp.client project is geselecteerd.

2. Kies OK-.

3. Klik opnieuw met de rechtermuisknop op het ASP.NET Core-project en selecteer Projectbestand bewerken.

   Hiermee opent u het .csproj-bestand voor het project.

4. Controleer in het bestand .csproj of de projectreferentie een <ReferenceOutputAssembly> element bevat met de waarde die is ingesteld op false.

   Deze verwijzing moet er als volgt uitzien.

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

5. Klik met de rechtermuisknop op het ASP.NET Core-project en kies Project opnieuw laden als deze optie beschikbaar is.

6. Controleer in Program.csof de volgende code aanwezig is.

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

7. Als u wilt publiceren, klikt u met de rechtermuisknop op het ASP.NET Core-project, kiest u Publicerenen selecteert u opties die overeenkomen met het gewenste publicatiescenario, zoals Azure, publiceren naar een map, enzovoort.

   Het publicatieproces duurt langer dan alleen voor een ASP.NET Core-project, omdat de opdracht npm run build wordt aangeroepen bij het publiceren. De BuildCommand wordt standaard npm run build uitgevoerd.

   Als u naar een map publiceert, raadpleegt u ASP.NET Hoofdmapstructuur voor meer informatie over de bestanden die zijn toegevoegd aan de map publiceren.

Probleemoplossing

Proxyfout

Mogelijk ziet u de volgende fout:

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

Als u dit probleem ziet, is de front-end waarschijnlijk gestart vóór de back-end.

• Zodra u de opdrachtprompt voor de back-end ziet, vernieuwt u de Vue-app in de browser.
• Controleer ook of de back-end is geconfigureerd voordat de front-end wordt gestart. Als u dit wilt controleren, selecteert u de oplossing in Solution Explorer en kiest u Eigenschappen in het menu Project. Selecteer vervolgens Opstartprojecten configureren en zorg ervoor dat het back-endproject ASP.NET Core eerst in de lijst staat. Als het niet de eerste is, selecteert u het project en gebruikt u de knop Pijl-omhoog om het project als eerste in de startlijst te plaatsen.

Als de poort in gebruik is, kunt u het poortnummer verhogen met 1 in launchSettings.json en vite.config.js.

Privacyfout

Mogelijk ziet u de volgende certificaatfout:

Your connection isn't private

Verwijder de Vue-certificaten uit %appdata%\local\asp.net\https of %appdata%\roaming\asp.net\httpsen probeer het opnieuw.

Poorten controleren

Als de weergegevens niet correct worden geladen, moet u mogelijk ook controleren of uw poorten juist zijn.

1. Zorg ervoor dat de poortnummers overeenkomen. Ga naar het launchSettings.json-bestand in uw ASP.NET Core-project (in de map Eigenschappen). Haal het poortnummer op uit de eigenschap applicationUrl.

   Als er meerdere applicationUrl eigenschappen zijn, zoekt u er een met behulp van een https-eindpunt. Het moet er ongeveer uitzien als https://localhost:7142.

2. Ga vervolgens naar het bestand vite.config.js voor uw Vue-project. Werk de eigenschap target bij zodat deze overeenkomt met de eigenschap applicationUrl in launchSettings.json. Wanneer u deze bijwerkt, moet die waarde er ongeveer als volgt uitzien:

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

Verouderde versie van Vue

Als u het consolebericht ziet Kan het bestand 'C:\Users\Me\source\repos\vueprojectname\package.jsop' niet vinden wanneer u het project maakt, moet u mogelijk uw versie van de Vite CLI bijwerken. Nadat u de Vite CLI hebt bijgewerkt, moet u mogelijk ook het .vuerc bestand verwijderen in C:\Users\[yourprofilename].

Docker

Als u het project maakt met Docker-ondersteuning ingeschakeld, voert u de volgende stappen uit:

1. Nadat de app is geladen, haalt u de Docker HTTPS-poort op met behulp van het venster Containers in Visual Studio. Controleer het tabblad Omgeving of Poorten.

   

2. Open het bestand vite.config.js voor het Vue-project. Werk de target variabele bij zodat deze overeenkomt met de HTTPS-poort in het venster Containers. Bijvoorbeeld in de volgende code:

   const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
      env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7163';
   

   wijzig https://localhost:7163 in de overeenkomende HTTPS-poort (in dit voorbeeld https://localhost:60833).

3. Start de app opnieuw op.

Als u een Docker-configuratie gebruikt die is gemaakt in oudere versies van Visual Studio, kan de back-end worden opgestart met het Docker-profiel en niet luisteren op de geconfigureerde poort 5173. Om op te lossen:

Bewerk het Docker-profiel in de launchSettings.json door de volgende eigenschappen toe te voegen:

"httpPort": 5175, 
"sslPort": 5173  

Volgende stappen

Zie Ontwikkelen van apps met één paginavoor meer informatie over SPA-toepassingen in ASP.NET Core. Het gekoppelde artikel biedt aanvullende context voor projectbestanden zoals aspnetcore-https.js, hoewel details van de implementatie verschillen vanwege verschillen tussen de projectsjablonen en het Vue.js framework versus andere frameworks. In plaats van een ClientApp-map bevinden de Vue-bestanden zich bijvoorbeeld in een afzonderlijk project.

Zie MSBuild-eigenschappen voor JSPS-voor informatie over MSBuild die specifiek zijn voor het clientproject.