Öğretici: Visual Studio'da Vue ile ASP.NET Core uygulaması oluşturma

Bu makalede, API arka ucu olarak hareket etmek için bir ASP.NET Core projesi ve kullanıcı arabirimi olarak davranacak bir Vue projesi oluşturmayı öğreneceksiniz.

Visual Studio, Angular, React ve Vue'yu destekleyen ASP.NET Temel Tek Sayfalı Uygulama (SPA) şablonları içerir. Şablonlar, ASP.NET Core projelerinizde her çerçevenin temel dosyalarını ve klasörlerini içeren yerleşik bir İstemci Uygulaması klasörü sağlar.

Aşağıdaki ASP.NET Temel Tek Sayfalı Uygulamalar oluşturmak için bu makalede açıklanan yöntemi kullanabilirsiniz:

• İstemci uygulamasını ASP.NET Core projesinin dışında ayrı bir projeye yerleştirme
• Bilgisayarınızda yüklü çerçeve CLI'sini temel alarak istemci projesini oluşturma

Önkoşullar

Aşağıdakileri yüklediğinizden emin olun:

• Visual Studio 2022 sürüm 17.11 veya üzeri ile ASP.NET ve web geliştirme iş yükü yüklü. Visual Studio'yu ücretsiz yüklemek için Visual Studio indirmeleri sayfasına gidin. İş yükünü yüklemeniz gerekiyorsa ve zaten Visual Studio'nuz varsa, Visual Studio Yükleyicisi'ni açan Araçlar>Araçları ve Özellikleri Al...menüsüne gidin. ASP.NET ve web geliştirme iş yükünü seçin, ardından Değiştir'i seçin.
• Node.jsile birlikte gelen npm (https://www.npmjs.com/).

Ön uç uygulamasını oluşturma

1. Başlangıç penceresini açmak için Dosya >Başlangıç Penceresi seçin, ardından Yeni proje oluştur 'i seçin.

   gösteren ekran görüntüsü

2. Arama çubuğunun üst kısmında Vue'yi arayın, ardından JavaScript veya TypeScript'i seçili dil olarak belirleyerek Vue ve ASP.NET Core'i seçin.

   

3. Projeyi VueWithASP olarak adlandırın ve ardından Sonrakiseçeneğini seçin.

   Ek Bilgi iletişim kutusunda, HTTPS için yapılandır seçeneğinin etkin olduğundan emin olun. Çoğu senaryoda, diğer ayarları varsayılan değerlerde bırakın.

4. Seç'iOluştur.

   Çözüm Gezgini aşağıdaki proje bilgilerini gösterir:

   çözüm gezginini gösteren ekran görüntüsü

   tek başına Vue şablonuyla karşılaştırıldığında, ASP.NET Core ile tümleştirme için bazı yeni ve değiştirilmiş dosyalar görürsünüz:

   • vite.config.json (değiştirildi)
   • HelloWorld.vue (değiştirildi)
   • package.json (değiştirildi)

Proje özelliklerini ayarlama

1. Çözüm Gezgini'nde VueWithASP.Server üzerine sağ tıklayın ve Özellikler'i seçin.

   

2. Özellikler sayfasında Hata Ayıklama sekmesini açın ve Hata Ayıklama Başlatma Profilleri Kullanıcı Arabirimi seçeneğini seçin. https profili veya ASP.NET Core projesinin adını taşıyan profil varsa, Tarayıcıyı Başlat seçeneğinin işaretini kaldırın.

   

   Bu değer, kaynak hava durumu verileriyle web sayfasının açılmasını engeller.

   Not

   Visual Studio'da launch.json, hata ayıklama araç çubuğundaki Başlangıç düğmesiyle ilişkili başlangıç ayarlarını depolar. Şu anda launch.json.vscode klasörünün altında bulunmalıdır.

3. Çözüm Gezgini'nde çözüme sağ tıklayın ve Özellikleröğesini seçin. Başlangıç projesi ayarlarının Birden çok projeolarak ayarlandığını ve her iki proje için Eylem'in Başlatolarak ayarlandığını doğrulayın.

Projeyi başlatma

Uygulamayı başlatmak için F5 basın veya pencerenin üst kısmındaki Başlangıç düğmesini seçin. İki komut istemi görüntülenir:

• çalışan ASP.NET Core API projesi
• Vite CLI, VITE v4.4.9 ready in 780 ms gibi bir ileti gösteriyor.

Vue uygulaması görünür ve API aracılığıyla doldurulur (localhost bağlantı noktası ekran görüntüsünden farklı olabilir).

Uygulamayı görmüyorsanız Sorun Giderme kısmına bakın.

Projeyi yayımlama

Visual Studio 2022 sürüm 17.3'den başlayarak, Visual Studio Yayımlama aracını kullanarak tümleşik çözümü yayımlayabilirsiniz.

1. Çözüm Gezgini'nde VueWithASP.Server projesine sağ tıklayın ve >Proje Başvurusu Ekleöğesini seçin.

   vuewithasp.client projesinin seçili olduğundan emin olun.

2. tamamseçin.

3. ASP.NET Core projesine yeniden sağ tıklayın ve proje dosyasını düzenleseçin.

   Bu işlem, projenin .csproj dosyasını açar.

4. .csproj dosyasında, proje referansının değeri falseolan bir <ReferenceOutputAssembly> öğesi içerdiğinden emin olun.

   Bu referans aşağıda gibi görünmelidir.

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

5. ASP.NET Core projesine sağ tıklayın ve bu seçenek varsa Projeyi Yeniden Yükle seçin.

6. Program.csiçinde aşağıdaki kodun mevcut olduğundan emin olun.

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

7. Yayımlamak için ASP.NET Core projesine sağ tıklayın, Yayımla'ı seçin ve azure gibi istediğiniz yayımlama senaryosuyla eşleşecek seçenekleri belirleyin( örneğin, bir klasörde yayımla vb.).

   Yayımlama işlemi yalnızca bir ASP.NET Core projesi için olduğundan daha fazla zaman alır çünkü yayımlama sırasında npm run build komutu çağrılır. BuildCommand varsayılan olarak npm run build çalıştırır.

   Bir klasörde yayımlarsanız, yayımlama klasörüne eklenen dosyalar hakkında daha fazla bilgi için bkz. ASP.NET Core dizin yapısı.

Sorun giderme

Ara sunucu hatası

Aşağıdaki hatayı görebilirsiniz:

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

Bu sorunu görürseniz, büyük olasılıkla ön uç arka uçtan önce başladı.

• Arka uç komut isteminin çalışır durumda olduğunu gördüğünüzde, tarayıcıda Vue uygulamasını yenilemeniz gerekir.
• Ayrıca, arka ucun ön uç öncesinde başlatacak şekilde yapılandırıldığını doğrulayın. Doğrulamak için Çözüm Gezgini'nde çözümü seçin, Proje menüsünden Özellikler seçin. Ardından başlangıç projelerini yapılandırma seçin ve arka uç ASP.NET Core projesinin listede ilk sırada olduğundan emin olun. İlk değilse projeyi seçin ve Yukarı ok düğmesini kullanarak projeyi başlatma listesindeki ilk proje yapın.

Aksi takdirde, bağlantı noktası kullanılıyorsa, bağlantı noktası numarasını 1 artırmayı, launchSettings.json ve vite.config.js'de deneyin.

Gizlilik hatası

Aşağıdaki sertifika hatasını görebilirsiniz:

Your connection isn't private

%appdata%\local\asp.net\https veya %appdata%\roaming\asp.net\httpsvue sertifikalarını silmeyi deneyin ve sonra yeniden deneyin.

Bağlantı noktalarını doğrulama

Hava durumu verileri doğru yüklenmiyorsa bağlantı noktalarınızın doğru olduğunu da doğrulamanız gerekebilir.

1. Bağlantı noktası numaralarının eşleştiğinden emin olun. ASP.NET Core projenizde (Özellikler klasöründe) launchSettings.json dosyasına gidin. applicationUrl özelliğinden bağlantı noktası numarasını alın.

   Birden çok applicationUrl özelliği varsa, https uç noktası kullanan bir özellik arayın. https://localhost:7142gibi görünmelidir.

2. Ardından Vue projenizin vite.config.js dosyasına gidin. target özelliğini launchSettings.jsoniçindeki applicationUrl özelliğiyle eşleşecek şekilde güncelleştirin. Güncelleştirdiğinizde, bu değer şuna benzer görünmelidir:

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

Vue'nun eski sürümü

Projeyi oluşturduğunuzda 'C:\Users\Me\source\repos\vueprojectname\package.js' dosyası bulunamadı iletisini konsolunda görürseniz, Vite CLI sürümünüzü güncellemeniz gerekebilir. Vite CLI'yi güncelleştirdikten sonra, C:\Users\[profilename].vuerc dosyasını da silmeniz gerekebilir.

Docker

Projeyi Docker desteği etkin olarak oluşturursanız aşağıdaki adımları izleyin:

1. Uygulama yükledikten sonra Visual Studio'da Kapsayıcıları penceresini kullanarak Docker HTTPS bağlantı noktasını alın. Ortamı veya Bağlantı Noktaları sekmesini denetleyin.

   docker kapsayıcısı bağlantı noktalarını gösteren ekran görüntüsü

2. Vue projesi için vite.config.js dosyasını açın. target değişkenini Kapsayıcılar penceresindeki HTTPS bağlantı noktasıyla eşleşecek şekilde güncelleştirin. Örneğin, aşağıdaki kodda:

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

   https://localhost:7163 eşleşen HTTPS bağlantı noktasına değiştirin (bu örnekte https://localhost:60833).

3. Uygulamayı yeniden başlatın.

Visual Studio'nun eski sürümlerinde oluşturulmuş bir Docker yapılandırması kullanıyorsanız arka uç Docker profilini kullanmaya başlayabilir ve yapılandırılan 5173 numaralı bağlantı noktasını dinlemeyebilir. Çözmek için:

Aşağıdaki özellikleri ekleyerek launchSettings.json Docker profilini düzenleyin:

"httpPort": 5175, 
"sslPort": 5173  

Sonraki adımlar

ASP.NET Core'daki SPA uygulamaları hakkında daha fazla bilgi için bkz. Tek Sayfalı Uygulamalar geliştirme. Bağlantılı makale, aspnetcore-https.jsgibi proje dosyaları için ek bağlam sağlar, ancak proje şablonları ile Vue.js çerçevesi ve diğer çerçeveler arasındaki farklar nedeniyle uygulamanın ayrıntıları farklıdır. Örneğin, ClientApp klasörü yerine Vue dosyaları ayrı bir projede yer alır.

İstemci projesine özel MSBuild bilgileri için, JSPSiçin MSBuild özelliklerine bakın.