Oktatóanyag: ASP.NET Core-alkalmazás létrehozása a Vue használatával a Visual Studióban

Ebben a cikkben megtudhatja, hogyan hozhat létre egy ASP.NET Core-projektet, amely API-háttérrendszerként és Vue-projektként működik felhasználói felületként.

A Visual Studio ASP.NET Core Single Page Application (SPA) sablonokat tartalmaz, amelyek támogatják az Angulart, a Reactet és a Vue-t. A sablonok egy beépített ügyfélalkalmazás-mappát biztosítanak a ASP.NET Core-megoldásban, amely tartalmazza az egyes keretrendszerek alapfájljait és mappáit.

A cikkben ismertetett módszerrel létrehozhat ASP.NET alapvető egyoldalas alkalmazásokat, amelyek:

• Helyezze az ügyfélalkalmazást egy külön projektbe, a ASP.NET Core-projekten kívülre
• Az ügyfélprojekt létrehozása a számítógépre telepített keretrendszer parancssori felülete alapján

Jegyzet

Ez a cikk a Vite CLI-t használó Visual Studio 2022 17.11-es verziójában frissített sablont használó projektlétrehozás folyamatát ismerteti. A Vite a Vue verzióját a projektfüggőségek felhasználásával határozza meg, például a package.json-ban.

Előfeltételek

Győződjön meg arról, hogy a következőket telepíti:

• A Visual Studio 2022 17.11-es vagy újabb verziója telepített ASP.NET és webfejlesztési számítási feladattal. Nyissa meg a Visual Studio letöltési oldalát, és telepítse ingyenesen. Ha telepítenie kell a feladatkört, és már rendelkezik Visual Studióval, lépjen a Eszközök>Eszközök és szolgáltatások lekérése...menüpontra, amely megnyitja a Visual Studio Installert. Válassza ki a ASP.NET és a webfejlesztési számítási feladatot, majd válassza a Módosítás lehetőséget.
• npm (https://www.npmjs.com/), amely a Node.jsrésze.

Az alkalmazás létrehozása

1. A Start ablakban (a megnyitáshoz válassza a Fájl>a Start ablak lehetőséget), válassza Új projekt létrehozásalehetőséget.

   

2. Keresse meg a Vue-t a felső keresősávon, majd válassza Vue és ASP.NET Core JavaScript vagy TypeScript nyelven a kijelölt nyelvként.

   

3. Nevezze el a projektet VueWithASP, majd válassza a Továbblehetőséget.

   A További információk párbeszédpanelen győződjön meg arról, hogy HTTPS- konfigurálása engedélyezve van. A legtöbb esetben hagyja meg a többi beállítást az alapértelmezett értékeknél.

4. Válassza ki a elemetlétrehozásához.

   A Megoldáskezelő a következő projektinformációkat jeleníti meg:

   

   A különálló Vue-sablonhozképest néhány új és módosított fájl jelenik meg a ASP.NET Core-ba való integrációhoz:

   • vite.config.js (módosítva)
   • HelloWorld.vue (módosítva)
   • package.json (módosítva)

A projekt tulajdonságainak beállítása

1. A Megoldáskezelőben kattintson jobb gombbal a VueWithASP.Server elemre, és válassza a Tulajdonságokparancsot.

   

2. A Tulajdonságok lapon nyissa meg a Hibakeresés lapot, és válassza a Hibakeresési indítási profilok felhasználói felületének megnyitása lehetőséget. Törölje a jelet a Böngésző indítása beállításból a https profilhoz vagy az ASP.NET Core projekt nevét viselő profilhoz, ha létezik ilyen.

   

   Ez az érték megakadályozza a weblap megnyitását a forrás időjárási adataival.

   Jegyzet

   A Visual Studióban launch.json a hibakeresési eszköztár Start gombjához társított indítási beállításokat tárolja. Jelenleg launch.json a .vscode mappában kell lennie.

3. Kattintson a jobb gombbal a megoldásra a Megoldáskezelőben, és válassza a Tulajdonságoklehetőséget. Ellenőrizze, hogy az Indítási projekt beállításai a "Több projekt" lehetőségre vannak-e állítva, és hogy mindkét projekt "Indítás" művelete értékre van-e beállítva.

A projekt indítása

Nyomja le F5 vagy az ablak tetején található Start gombot az alkalmazás elindításához. Két parancssor jelenik meg:

• Az ASP.NET Core API-projekt fut
• A Vite CLI egy üzenetet jelenít meg, például VITE v4.4.9 ready in 780 ms

Jegyzet

Ellenőrizze az üzenetek konzolkimenetét. Előfordulhat például, hogy érkezik egy üzenet, amely a Node.jsfrissítésére szólít fel.

Megjelenik a Vue alkalmazás, és az API-n keresztül van feltöltve (a localhost-port eltérhet a képernyőképtől).

Ha nem látja az időjárás-előrejelzés adatait a böngészőben, tekintse meg a hibaelhárítást.

A projekt közzététele

A Visual Studio 2022 17.3-s verziójától kezdve közzéteheti az integrált megoldást a Visual Studio Publish eszközzel.

Jegyzet

A közzététel használatához hozza létre a JavaScript-projektet a Visual Studio 2022 17.3-s vagy újabb verziójával.

1. A Megoldáskezelőben kattintson a jobb gombbal a VueWithASP.Server projektre, és válassza >projekthivatkozás hozzáadásalehetőséget.

   Győződjön meg arról, hogy az vuewithasp.client projekt van kiválasztva.

2. Válassza OKlehetőséget.

3. Kattintson ismét a jobb gombbal a ASP.NET Core-projektre, és válassza a Projektfájl szerkesztéselehetőséget.

   Ekkor megnyílik a projekt .csproj fájlja.

4. A .csproj fájlban győződjön meg arról, hogy a projekthivatkozás tartalmaz egy <ReferenceOutputAssembly> elemet, amelynek értéke false.

   Ennek a hivatkozásnak a következőhöz hasonlóan kell kinéznie.

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

5. Kattintson a jobb gombbal a ASP.NET Core-projektre, és válassza Project újratöltése lehetőséget, ha ez a lehetőség elérhető.

6. A Program.csgyőződjön meg arról, hogy a következő kód található.

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

7. Kattintson a jobb gombbal a ASP.NET Core-projektre, válassza a Közzététel lehetőséget, és válassza ki a kívánt közzétételi forgatókönyvnek megfelelő beállításokat, például az Azure-t, a közzétételt egy mappában stb.

8. A közzétételi profil létrehozása után a Közzététel lapon válassza a Közzététel lehetőséget a projekt közzétételéhez.

   A közzétételi folyamat több időt vesz igénybe, mint egy ASP.NET Core-projekt esetében, mivel a npm run build parancs meghívása a közzétételkor történik. Alapértelmezés szerint a BuildCommandnpm run build fut.

   Ha egy mappában tesz közzé, a ASP.NET Core-címtár struktúráját ismertető cikkben talál további információt a közzétett mappához hozzáadott fájlokról.

Hibaelhárítás

Proxy hiba

A következő hibaüzenet jelenhet meg:

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

Ha ezt a problémát látja, valószínűleg a felhasználói felület kezdődött el a háttérrendszer előtt.

• Amint megjelenik a háttérbeli parancssor, és fut, frissítse a Vue alkalmazást a böngészőben.
• Ellenőrizze azt is, hogy a háttérrendszer úgy van-e konfigurálva, hogy az az előtér előtt kezdődjön. Az ellenőrzéshez válassza ki a megoldást a Megoldáskezelőben, és válassza a Project menüTulajdonságok lehetőséget. Ezután válassza Indítási projektek konfigurálása lehetőséget, és győződjön meg arról, hogy a háttérrendszerbeli ASP.NET Core-projekt szerepel a listában. Ha nem ez az első, válassza ki a projektet, és a Fel nyílbillentyűvel állítsa be az első projektként az indítási listában.

Ellenkező esetben, ha a port használatban van, próbálja meg növelni a portszámot 1launchSettings.json és vite.config.js.

Adatvédelmi hiba

A következő tanúsítványhiba jelenhet meg:

Your connection isn't private

Próbálja meg törölni a Vue-tanúsítványokat a %appdata%\local\asp.net\https vagy %appdata%\roaming\asp.net\httpsfájlból, majd próbálkozzon újra.

Portok ellenőrzése

Ha az időjárási adatok nem megfelelően töltődnek be, előfordulhat, hogy a portok helyességét is ellenőriznie kell.

1. Győződjön meg arról, hogy a portszámok egyeznek. Nyissa meg a launchSettings.json fájlt a ASP.NET Core-projektben (a Tulajdonságok mappában). Kérje le a portszámot a applicationUrl tulajdonságból.

   Ha több applicationUrl tulajdonság is létezik, keressen azon egyet, amelyik egy https végpontot használ. Úgy kell kinéznie, mint https://localhost:7142.

2. Ezután nyissa meg a Vue-projekt vite.config.js fájlját. Frissítse a target tulajdonságot, hogy megfeleljen a applicationUrl tulajdonságának. Frissítéskor ennek az értéknek a következőhöz hasonlóan kell kinéznie:

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

A Vue elavult verziója

Ha megjelenik a konzol üzenete, A projekt létrehozásakor nem található a "C:\Users\Me\source\repos\vueprojectname\package.js" fájl, előfordulhat, hogy frissítenie kell a Vite CLI verzióját. A Vite parancssori felület frissítése után előfordulhat, hogy a .vuerc fájlt is törölnie kell a C:\Users\[yourprofilename].

Kikötőmunkás

Ha Docker-támogatással hozza létre a projektet, engedélyezve van, hajtsa végre a következő lépéseket:

1. Az alkalmazás betöltése után szerezze be a Docker HTTPS-portot a Tárolók ablak a Visual Studióban. Ellenőrizze a Környezet vagy a Portok lapot.

   

2. Nyissa meg a Vue-projekthez tartozó vite.config.js fájlt. Frissítse a target változót, hogy megfeleljen a HTTPS-portnak a Tárolók ablakban. Például a következő kódban:

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

   Módosítsa https://localhost:7163-at a megfelelő HTTPS portra (ebben a példában https://localhost:60833).

   Jegyzet

   Ha a HTTPS-port hiányzik a Tárolók ablakban, launchSettings.json fájllal adhat hozzá portot. A szakaszban Container (Dockerfile) és a bejegyzés "useSSL": true után adja hozzá "sslPort": <any port>. Ebben a példában használja a következőket: "sslPort": 60833

3. Indítsa újra az alkalmazást.

Ha a Visual Studio régebbi verzióiban létrehozott Docker-konfigurációt használ, előfordulhat, hogy a háttérrendszer a Docker-profilt használja, és nem figyeli a konfigurált 5173-at. A probléma megoldása:

Szerkessze a Docker-profilt a launchSettings.json-ban a következő tulajdonságok hozzáadásával:

"httpPort": 5175, 
"sslPort": 5173  

Következő lépések

Az ASP.NET Core spa-alkalmazásairól további információt az Egyoldalas alkalmazások fejlesztésecímű témakörben talál. A csatolt cikk további kontextust biztosít a projektfájlokhoz, például a aspnetcore-https.js, bár a megvalósítás részletei eltérnek a projektsablonok és a Vue.js keretrendszer és más keretrendszerek közötti különbségek miatt. A ClientApp-mappa helyett például a Vue-fájlok egy külön projektben találhatók.

Az ügyfélprojektre vonatkozó MSBuild információkért lásd JSPSMSBuild tulajdonságait.