Hosting statis Vue

Deploy
proyek Vue

Unggah output statis dari Vue, Vite, Vue CLI, atau Nuxt dan publikasikan dengan fallback history-mode, HTTPS, pengiriman global, dan domain kustom saat dibutuhkan.

Tampilkan langkah setup
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()],
// Use a deploy-safe asset base
base: './',
build: {
outDir: 'dist'
}
})
Vite dan webpack siap

Ketahui folder Vue mana yang perlu diunggah

Sebagian besar masalah deployment Vue mulai sebelum hosting: folder output salah, base path salah, atau build belum dipratinjau lokal.

Vite + Vue

npm run build
output: dist/

Vite menaruh production build di dist secara default. Jika config mengubah build.outDir atau base, unggah folder output sebenarnya dan uji URL asset.

Vue CLI

npm run build
output: dist/

Build statis Vue CLI biasanya dideploy dari dist. Jika app dilayani dari subpath, publicPath harus cocok dengan struktur URL final.

Output statis Nuxt

nuxi generate
output: .output/public atau dist/

Nuxt bisa menghasilkan output statis, tetapi route server-rendered dan API server butuh runtime. Unggah hanya file statis public yang dihasilkan untuk alur ini.

Apa yang sebenarnya dibutuhkan Vue Router history mode

URL bersih layak dipertahankan

Hash route bekerja hampir di mana saja, tetapi URL dengan fragmen # terasa seperti workaround dan kurang enak untuk dibagikan, dianalisis, dan dipoles sebagai produk.

Vue Router history mode memberi path bersih seperti /about atau /dashboard/settings. Tradeoff-nya, host harus tahu cara melayani index.html untuk route yang bukan file nyata.

Cara DeployPages menangani history mode

Saat request tidak cocok dengan asset statis nyata, DeployPages melayani index.html root dan membiarkan Vue Router menentukan view akhir di browser.

  • Kunjungan langsung ke nested route tidak langsung hard-fail.
  • Dokumen root dikembalikan sebagai respons fallback.
  • Vue mount, membaca URL saat ini, dan merender route yang benar.

Cek produksi Vue

App Vue bisa bekerja di development dan tetap gagal setelah unggahan. Cek ini untuk menangkap kegagalan umum sebelum tautan dibagikan.

Base path

Untuk Vite, cek base. Untuk Vue CLI, cek publicPath. Nilai salah biasanya muncul sebagai CSS, JS, font, atau gambar yang hilang.

History fallback

Buka nested route secara langsung dan refresh. Jika halaman tetap hidup, fallback bekerja.

Output static-only

DeployPages melayani file statis. API route, server middleware, dan perilaku SSR-only butuh backend atau runtime terpisah.

Pratinjau lokal

Gunakan server pratinjau lokal untuk production build. Membuka dist/index.html dengan file:// bisa menyembunyikan atau membuat masalah yang tidak sama dengan deployment.

Alur deployment Vue

01

Build asset statis

Jalankan production build di Vite, Vue CLI, atau mode statis Nuxt agar app dikeluarkan sebagai file yang bisa dimuat browser langsung.

02

Temukan folder output

Sebagian besar proyek Vue dan Vite output ke dist. Proyek statis Nuxt biasanya deploy .output/public atau direktori dist hasil generate tergantung konfigurasi.

Build statis Nuxt biasanya mengunggah .output/public atau dist tergantung konfigurasi proyek Anda.

03

Unggah dan validasi tautan

Unggah seluruh folder output dan verifikasi deep link, navigasi router, dan path asset setelah website live.

Masalah umum deployment Vue

Fix 01

Refresh nested route menghasilkan 404

Vue Router memakai history mode, tetapi host mencari file nyata. Gunakan fallback SPA agar route dokumen yang tidak dikenal mengembalikan index.html.

Fix 02

File CSS atau JS menghasilkan 404

Cek base Vite atau publicPath Vue CLI. Pastikan juga Anda mengunggah seluruh folder dist, termasuk asset yang dihasilkan.

Fix 03

App bekerja dengan hash mode tetapi tidak history mode

Hash mode menyimpan routing setelah # di browser. History mode memakai URL bersih dan membutuhkan perilaku server fallback untuk kunjungan langsung.

Fix 04

Output Nuxt kehilangan perilaku server

Output statis Nuxt bisa dihosting sebagai file. Route server Nuxt, server middleware, dan perilaku SSR-only membutuhkan runtime server.

FAQ deployment Vue

Kenapa file CSS dan JS saya menghasilkan 404?

Biasanya asset path dibuild untuk base URL yang berbeda, atau direktori asset tidak ikut diunggah. Di Vite, cek base. Di Vue CLI, cek publicPath.

Apakah mendukung Nuxt?

Ya untuk output statis. Generate static site lebih dulu, lalu unggah folder public yang dihasilkan. DeployPages bukan target yang tepat untuk Nuxt server rendering atau API route server.

Haruskah memakai hash mode atau history mode?

Gunakan history mode jika ingin URL bersih dan host mendukung fallback ke index.html. Hash mode lebih sederhana untuk dihosting, tetapi meninggalkan # di setiap client-side route.

Haruskah saya mengunggah proyek source Vue?

Tidak. Unggah folder output produksi, biasanya dist. Proyek source berisi file development dan dependency yang tidak dimaksudkan untuk dilayani langsung.

Apakah state Pinia atau Vuex bertahan setelah refresh?

Tidak otomatis. Refresh browser mereset state client in-memory. Simpan state penting dengan localStorage atau plugin persistence pilihan Anda.

Bisakah kembali ke release sebelumnya?

Bisa. DeployPages menyimpan riwayat deployment sehingga Anda dapat kembali ke build statis sebelumnya saat dibutuhkan.