Host aplikasi Vue: Vite, mode history Vue Router

Q: Bisakah saya melakukan deploy situs Nuxt ke Lobsite?

Ya, yang di-generate: jalankan npx nuxi generate, lalu npx lobsite .output/public. Halaman yang memerlukan server Nuxt, seperti rute server, tidak akan berjalan.

Q: Bagaimana cara menampilkan tampilan "halaman tidak ditemukan" di aplikasi Vue?

Tambahkan rute catch-all di akhir rute Anda, { path: "/:pathMatch(.)", component: NotFound }. Dengan mode satu halaman aktif, setiap path halaman yang tidak dikenal mencapai aplikasi, sehingga router memutuskan yang ditampilkan.

Aplikasi Vue yang dibuat dengan npm create vue@latest di-build oleh Vite ke dist/: satu index.html dan JavaScript yang menggambar setiap halaman. Lobsite meng-host folder itu. Jalankan npm run build, lalu npx lobsite, dan aplikasi aktif di alamat *.lobsite.app dengan HTTPS. Mode history Vue Router berfungsi setelah mode satu halaman diaktifkan.

Cara kerjanya

Build aplikasi dengan npm run build. Vite menulisnya ke dist/.
Jalankan npx lobsite di proyek. Perintah ini melakukan deploy dist/, bukan public/, yang disalin Vite ke build. Deploy pertama tidak memerlukan akun dan bertahan 6 jam.
Aktifkan mode satu halaman untuk Vue Router: spa = true di lobsite.toml, atau Aplikasi satu halaman di pengaturan situs. Simpan situs dengan tautan klaim, di akun gratis.

Mode history Vue Router

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

createWebHistory() memberi alamat bersih seperti /projects/7. Membukanya langsung meminta file yang tidak ada kepada server; mode satu halaman menjawab dengan index.html Anda, dan Vue Router menampilkan tampilan yang benar.
createWebHashHistory() (alamat seperti /#/projects/7) berfungsi tanpa mode satu halaman, karena server hanya melihat /. Alamat bersih lebih baik untuk berbagi dan mesin pencari.
Rute catch-all (path: "/:pathMatch(.*)*") adalah tempat tampilan "halaman tidak ditemukan" milik aplikasi Anda, karena dengan mode satu halaman setiap path halaman yang tidak dikenal mencapai aplikasi.

Nuxt dan Vue CLI

Nuxt membuat situs statis dengan npx nuxi generate, ke .output/public/. Folder itu tidak ditemukan otomatis, jadi berikan sekali, npx lobsite .output/public, dan akan diingat di lobsite.toml. Setiap halaman dibuat sebagai file sendiri, sehingga mode satu halaman hanya diperlukan untuk rute yang tidak dibuat Nuxt. Rute server dan render server Nuxt memerlukan host yang menjalankan Node.
Vue CLI (@vue/cli-service) dalam mode pemeliharaan, dan proyek baru memakai Vite. Proyek Vue CLI yang ada melakukan build ke dist/, yang di-deploy dengan cara yang sama.

Aplikasi satu halaman

spa = true di lobsite.toml, atau satu sakelar di dasbor: deep link membuka aplikasi Anda, file yang tidak ada tetap 404.

Hanya file yang berubah yang diunggah

File disimpan berdasarkan hash-nya. Deploy ulang situs yang tidak berubah mengunggah 0 byte.

Setiap deploy mendapat URL

Pratinjau sebelum tayang. Rollback dengan satu klik, termasuk pengalihan.

HTTPS di mana-mana

Setiap situs mendapat alamat *.lobsite.app dengan HTTPS sejak deploy pertama.

Formulir yang langsung berfungsi

Arahkan formulir ke /_lobsite/forms/contact. Termasuk penyaringan spam.

Coba tanpa akun

Deploy tanpa akun aktif selama 6 jam. Tautan klaim menyimpannya, gratis.

Perbandingan host Vue

	Lobsite	Netlify	Vercel	GitHub Pages
Mode history Vue Router	`spa = true`, atau sakelar di dasbor	Aturan `_redirects`	Rewrite di `vercel.json`	Tidak: mode hash, atau `404.html` disajikan dengan status 404
File skrip hilang setelah deploy	404, error yang jelas	`index.html` aplikasi	`index.html` aplikasi	404
Render server Nuxt	Tidak	Ya	Ya	Tidak
Akun sebelum deploy pertama	Tidak: aktif 6 jam, lalu simpan gratis	Ya	Ya	Ya, dan repositori
Formulir tanpa backend	Ya, setelah situs ada di akun	Ya	Tidak	Tidak
Domain kustom	Ya, gratis	Ya	Ya	Ya

Untuk aplikasi Vue yang berjalan di browser, Lobsite hanya satu perintah dari dist/ ke alamat aktif, dengan mode history cukup satu pengaturan dan URL pratinjau untuk setiap deploy.

Pertanyaan umum

Mengapa halaman Vue Router menampilkan "Not found" saat dimuat ulang?

Alamat mode history hanya ada di dalam aplikasi. Aktifkan mode satu halaman, spa = true di lobsite.toml atau Aplikasi satu halaman di pengaturan situs, agar path itu membuka index.html Anda.

Haruskah aplikasi Vue di Lobsite memakai mode hash atau history?

Mode history, dengan mode satu halaman aktif. Alamatnya lebih bersih dan mesin pencari memperlakukannya sebagai halaman terpisah. Mode hash hanya berguna jika Anda tidak dapat mengubah pengaturan server.

Bisakah saya melakukan deploy situs Nuxt ke Lobsite?

Ya, yang di-generate: jalankan npx nuxi generate, lalu npx lobsite .output/public. Halaman yang memerlukan server Nuxt, seperti rute server, tidak akan berjalan.

Bagaimana cara menampilkan tampilan "halaman tidak ditemukan" di aplikasi Vue?

Tambahkan rute catch-all di akhir rute Anda, { path: "/:pathMatch(.*)*", component: NotFound }. Dengan mode satu halaman aktif, setiap path halaman yang tidak dikenal mencapai aplikasi, sehingga router memutuskan yang ditampilkan.

Hosting aplikasi Vue