Tutorial: Membuat aplikasi ASP.NET Core dengan Vue di Visual Studio

Dalam artikel ini, Anda akan mempelajari cara membangun proyek ASP.NET Core yang bertindak sebagai backend API dan proyek Vue yang bertindak sebagai UI.

Visual Studio menyertakan templat ASP.NET Core Single Page Application (SPA) yang mendukung Angular, React, dan Vue. Templat menyediakan folder Aplikasi Klien bawaan di proyek ASP.NET Core Anda yang berisi file dasar dan folder dari setiap kerangka kerja.

Anda dapat menggunakan metode yang dijelaskan dalam artikel ini untuk membuat Aplikasi Halaman Tunggal Inti ASP.NET yang:

• Meletakkan aplikasi klien dalam proyek terpisah, di luar proyek ASP.NET Core
• Membuat proyek klien berdasarkan kerangka kerja CLI yang terpasang di komputer Anda

Catatan

Artikel ini menjelaskan proses pembuatan proyek menggunakan templat yang diperbarui di Visual Studio 2022 versi 17.8, yang menggunakan Vite CLI.

Prasyarat

Pastikan untuk menginstal hal berikut:

• Visual Studio 2022 versi 17.8 atau yang lebih baru dengan beban kerja ASP.NET dan pengembangan web terinstal. Buka halaman unduhan Visual Studio untuk menginstalnya secara gratis. Jika Anda perlu memasang beban kerja dan sudah memiliki Visual Studio, buka Alat>Dapatkan Alat dan Fitur..., yang akan membuka alat penginstal Visual Studio. Pilih beban kerja ASP.NET dan pengembangan web, lalu pilih Ubah.
• npm (https://www.npmjs.com/), yang disertakan dengan Node.js.

Membuat aplikasi frontend

1. Di jendela Mulai (pilih Jendela Mulai File>untuk dibuka), pilih Buat proyek baru.

   

2. Cari Vue di bilah pencarian di bagian atas lalu pilih Vue dan ASP.NET Core (Pratinjau) dengan JavaScript atau TypeScript sebagai bahasa yang dipilih.

   

3. Beri nama proyek VueWithASP lalu pilih Buat.

   Penjelajah Solusi memperlihatkan informasi proyek berikut:

   

   Dibandingkan dengan templat Vue mandiri, Anda melihat beberapa file baru dan yang dimodifikasi untuk integrasi dengan ASP.NET Core:

   • vite.config.json (dimodifikasi)
   • HelloWorld.vue (diubah)
   • package.json (diubah)

Mengatur properti proyek

1. Di Penjelajah Solusi, klik kanan VueWithASP.Server dan pilih Properti.

   

2. Di halaman Properti, buka tab Debug dan pilih opsi Buka antarmuka pengguna profil peluncuran debug. Hapus centang opsi Luncurkan Browser untuk profil bernama sesuai proyek ASP.NET Core (atau https, jika ada).

   

   Nilai ini mencegah pembukaan halaman web dengan data cuaca sumber.

   Catatan

   Di Visual Studio, launch.json menyimpan pengaturan startup yang terkait dengan tombol Mulai di toolbar Debug. Saat ini, launch.json harus terletak di folder .vscode.

Memulai proyek

Tekan F5 atau pilih tombol Mulai di bagian atas jendela untuk memulai aplikasi. Dua perintah muncul:

• Proyek API ASP.NET Core sedang berjalan
• Vite CLI memperlihatkan pesan seperti VITE v4.4.9 ready in 780 ms

Catatan

Periksa output konsol untuk pesan. Misalnya mungkin ada pesan untuk memperbarui Node.js.

Aplikasi Vue muncul dan diisi melalui API. Jika Anda tidak melihat aplikasi, lihat Pemecahan Masalah.

Menerbitkan proyek

Mulai dari Visual Studio 2022 versi 17.3, Anda dapat menerbitkan solusi terintegrasi menggunakan alat Visual Studio Publish.

Catatan

Untuk menggunakan publikasi, buat proyek JavaScript Anda menggunakan Visual Studio 2022 versi 17.3 atau yang lebih baru.

1. Di Penjelajah Solusi, klik kanan proyek VueWithASP.Server dan pilih Tambahkan>Referensi Proyek.

   Pastikan proyek vuewithasp.client dipilih.

2. Pilih OK.

3. Klik kanan proyek ASP.NET Core lagi dan pilih Edit File Proyek.

   Ini membuka file .csproj untuk proyek.

4. Dalam file .csproj, pastikan referensi proyek menyertakan <ReferenceOutputAssembly> elemen dengan nilai yang diatur ke false.

   Referensi ini akan terlihat seperti berikut ini.

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

5. Klik kanan proyek ASP.NET Core dan pilih Muat Ulang Proyek jika opsi tersebut tersedia.

6. Dalam Program.cs, pastikan kode berikut ada.

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

7. Untuk menerbitkan, klik kanan proyek ASP.NET Core, pilih Terbitkan, dan pilih opsi untuk mencocokkan skenario penerbitan yang Anda inginkan, seperti Azure, terbitkan ke folder, dll.

   Proses penerbitan membutuhkan lebih banyak waktu daripada hanya untuk proyek ASP.NET Core, karena npm run build perintah dipanggil saat menerbitkan. BuildCommand berjalan npm run build secara default.

Pemecahan Masalah

Kesalahan proksi

Anda mungkin melihat kesalahan berikut:

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

Jika Anda melihat masalah ini, kemungkinan besar frontend dimulai sebelum backend. Setelah Anda melihat perintah backend aktif dan berjalan, cukup refresh aplikasi Vue di browser.

Jika tidak, jika port sedang digunakan, coba masukkan nomor port sebesar 1 dalam peluncuran Pengaturan.json dan vite.config.js.

Kesalahan privasi

Anda mungkin melihat kesalahan sertifikat berikut:

Your connection isn't private

Coba hapus sertifikat Vue dari %appdata%\local\asp.net\https atau %appdata%\roaming\asp.net\https, lalu coba lagi.

Verifikasi port

Jika data cuaca tidak dimuat dengan benar, Anda mungkin juga perlu memverifikasi bahwa port Anda sudah benar.

1. Pastikan nomor port cocok. Buka file launchSettings.json di proyek ASP.NET Core Anda (di folder Properti). Dapatkan nomor port dari properti applicationUrl.

   Jika ada beberapa properti applicationUrl, cari properti menggunakan titik akhir https. Nilainya akan terlihat mirip dengan https://localhost:7142.

2. Kemudian, buka file vite.config.js untuk proyek Vue Anda. target Perbarui properti agar sesuai dengan properti dalam peluncuran applicationUrl Pengaturan.json. Saat Anda memperbaruinya, nilai tersebut akan terlihat mirip dengan:

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

Versi Vue yang sudah kedaluarsa

Jika Anda melihat pesan konsol Tidak dapat menemukan file 'C:\Users\Me\source\repos\vueprojectname\package.json' saat membuat proyek, Anda mungkin perlu memperbarui versi Vite CLI Anda. Setelah memperbarui Vite CLI, Anda mungkin juga perlu menghapus file .vuerc di C:\Users\[yourprofilename].

Docker

Jika Anda mengaktifkan dukungan Docker saat membuat proyek API web, backend dapat dimulai menggunakan profil Docker dan tidak mendengarkan port yang dikonfigurasi 5173. Untuk mengatasi:

Edit profil Docker di peluncuran Pengaturan.json dengan menambahkan properti berikut:

"httpPort": 5175, 
"sslPort": 5173  

Atau, reset menggunakan metode berikut:

1. Di properti Solusi, atur aplikasi backend sebagai proyek startup.
2. Di menu Debug, alihkan profil menggunakan menu menurun tombol Mulai ke profil untuk aplikasi backend Anda.
3. Selanjutnya, di properti Solusi, reset ke beberapa proyek startup.

Langkah berikutnya

Untuk informasi selengkapnya tentang aplikasi SPA di ASP.NET Core, lihat Mengembangkan Aplikasi Halaman Tunggal. Artikel tertaut menyediakan konteks tambahan untuk file proyek seperti aspnetcore-https.js, meskipun detail implementasi berbeda karena perbedaan antara templat proyek dan kerangka kerja Vue.js vs. kerangka kerja lainnya. Misalnya, alih-alih folder ClientApp, file Vue terkandung dalam proyek terpisah.

Untuk informasi MSBuild khusus untuk proyek klien, lihat Properti MSBuild untuk JSPS.