Cara Betulkan Ralat 404 Selepas Deploy Laman Web atau Aplikasi Anda

Jika aplikasi anda berfungsi secara tempatan tetapi halaman mengembalikan 404 selepas deploy, punca paling biasa ialah ketiadaan penghalaan aplikasi halaman tunggal (SPA): pelayan mencari fail bernama /dashboard yang tidak wujud, kerana laluan itu hanya wujud dalam JavaScript. Penyelesaiannya ialah peraturan fallback yang menghidangkan index.html untuk laluan aplikasi. Punca lain ialah fail yang hilang daripada output binaan, laluan sensitif huruf besar-kecil, perbezaan slash akhir, laluan asas yang salah, dan laluan API yang tidak pernah di-deploy.

Mulakan dengan mencatat URL tepat yang memberi 404 dan bagaimana anda sampai ke sana. Corak itu menunjuk terus kepada puncanya.

Langkah 1: Cari corak

Apa yang anda lihat	Punca paling mungkin	Pergi ke
Halaman utama berfungsi; mengklik pautan berfungsi; tetapi menyegarkan atau membuka pautan dalam memberi 404	Tiada fallback SPA	Langkah 2
Setiap halaman 404, termasuk halaman utama	Folder yang salah diterbitkan, atau binaan tidak di-deploy	Langkah 3
Halaman dimuatkan, tetapi imej, fon atau skrip 404	Fail hilang daripada binaan, atau laluan salah	Langkah 4
Berfungsi dengan `/about/`, gagal dengan `/about` (atau sebaliknya)	Pengendalian slash akhir	Langkah 5
`/About` gagal tetapi `/about` berfungsi	Pelayan sensitif huruf besar-kecil	Langkah 4
Halaman dimuatkan, tetapi panggilan data ke `/api/...` 404	API tidak di-deploy atau tidak dilalukan	Langkah 6
URL lama dari laman sebelumnya 404	Ubah hala tiada	Langkah 7
Hanya pada domain tersuai	DNS atau persediaan domain	Langkah 8

Untuk melihat kod status sebenar, buka alat pembangun (klik kanan → Inspect), pergi ke tab Network, segarkan, dan lihat status permintaan pertama.

Langkah 2: Tambah fallback SPA

Ini yang paling klasik. Dalam aplikasi halaman tunggal React, Vue atau Svelte, pelayan hanya mempunyai beberapa fail sebenar: index.html dan sedikit JavaScript dan CSS. Laluan seperti /dashboard atau /projects/42 dikendalikan oleh penghala dalam pelayar.

Mengklik pautan berfungsi: penghala menukar URL dan melukis halaman baharu tanpa bertanya kepada pelayan.
Menyegarkan atau membuka pautan secara langsung gagal: pelayar meminta /dashboard daripada pelayan, pelayan tiada fail sedemikian, dan ia mengembalikan 404.

Penyelesaiannya ialah peraturan yang berkata: jika permintaan tidak sepadan dengan fail sebenar, hidangkan index.html dengan status 200, dan biarkan penghala mengambil alih. Cara menambahnya bergantung pada hos (semak dokumentasi semasa hos anda, kerana butirannya berubah):

Hos	Peraturan fallback biasa
Netlify	Fail `_redirects` dalam folder yang diterbitkan dengan `/* /index.html 200`
Vercel	Rewrite dalam `vercel.json` dari semua laluan ke `/index.html` (praset rangka kerja selalunya mengendalikan ini)
Cloudflare Pages	Menghidangkan fallback gaya SPA secara lalai apabila tiada `404.html` peringkat atas
Nginx	`try_files $uri $uri/ /index.html;` dalam blok `location /`
Apache	Peraturan rewrite dalam `.htaccess` yang menghantar permintaan bukan fail ke `index.html`
GitHub Pages	Tiada rewrite di bahagian pelayan; penyelesaian sementara yang biasa ialah penghalaan hash atau `404.html` yang mengubah hala

Pastikan peraturan itu tidak menelan fail sebenar: permintaan untuk /assets/app.js mesti tetap mengembalikan fail JavaScript. Jika ia mengembalikan index.html, anda akan dapat halaman putih kosong dengan ralat “Failed to load module script”. Lihat cara membetulkan halaman putih kosong.

Beri juga penghala laluan tangkap-semua supaya URL yang tidak sepadan dengan mana-mana halaman menunjukkan “Halaman tidak dijumpai” yang mesra, bukan kosong.

Jika anda tidak boleh menukar tetapan pelayan, penghalaan hash (URL seperti /#/dashboard) mengelakkan masalah ini, kerana bahagian selepas # tidak pernah dihantar ke pelayan. Ia penyelesaian sementara, bukan pilihan pertama: URL lebih hodoh dan kurang mesra enjin carian.

Rangka kerja yang merender halaman di pelayan atau menjananya semasa binaan (Next.js, Astro, dan yang serupa) biasanya mempunyai fail sebenar atau laluan pelayan untuk setiap halaman, jadi masalah khusus ini kurang biasa di sana. Setara mereka ialah halaman yang tidak pernah dijana semasa binaan.

Langkah 3: Semak apa yang sebenarnya di-deploy

Jika semuanya 404, pelayan mungkin tidak menghidangkan aplikasi binaan anda.

Folder yang betul. Hos mesti menerbitkan output binaan (biasanya dist untuk Vite, build untuk Create React App, out untuk eksport statik Next.js), bukan root projek.
Binaan berjalan. Baca log deploy. Jika binaan gagal, hos mungkin tidak men-deploy apa-apa, atau versi lama.
index.html berada di peringkat atas folder yang diterbitkan, bukan dalam sub-folder.
Laluan asas sepadan. Jika aplikasi dihidangkan dari example.com/app/, ia mesti dibina dengan asas tersebut (base Vite, basename React Router), atau setiap laluan dan aset akan tersasar.

Langkah 4: Betulkan fail yang hilang dan laluan yang salah

Apabila halaman dimuatkan tetapi aset 404:

Sensitiviti huruf besar-kecil. macOS dan Windows biasanya menganggap Logo.png dan logo.png sebagai fail yang sama. Kebanyakan pelayan Linux tidak. Pastikan setiap rujukan sepadan tepat dengan nama fail sebenar.
Fail di luar binaan. Dalam Vite, fail dalam public/ disalin seadanya dan dirujuk dari root (/logo.png). Fail yang diimport dalam kod dibundel. Fail yang berada di tempat lain dalam projek mungkin tidak di-deploy sama sekali.
Laluan relatif. images/photo.jpg diselesaikan berdasarkan URL semasa, jadi ia rosak pada /blog/post-1. Gunakan /images/photo.jpg.
Fail yang dimuat naik disimpan ke cakera tempatan. Jika muat naik pengguna ditulis ke folder pelayan sendiri, ia hilang apabila versi baharu di-deploy. Gunakan storan fail yang betul.

Langkah 5: Kendalikan slash akhir dengan konsisten

/about dan /about/ ialah URL yang berbeza. Hos berbeza dari segi menambah atau membuang slash, dan ketidakpadanan dengan pautan atau penghala anda boleh menghasilkan 404 atau gelung ubah hala. Pilih satu gaya, pastikan pautan anda menggunakannya, dan konfigurasikan hos untuk mengubah hala bentuk satu lagi kepadanya. Konsistensi juga membantu enjin carian, yang jika tidak mungkin melihat dua salinan setiap halaman.

Langkah 6: Betulkan laluan API yang 404

Jika halaman dimuatkan tetapi tab Network menunjukkan permintaan /api/... mengembalikan 404:

Bahagian belakang tidak di-deploy. Hos statik hanya menghidangkan fail; bahagian belakang mesti dijalankan di suatu tempat.
Laluan dikendalikan berbeza dalam pengeluaran. Dalam pembangunan, proksi mungkin memajukan /api ke pelayan berasingan. Dalam pengeluaran, hos memerlukan rewrite yang setara, atau bahagian hadapan mesti memanggil alamat sebenar API.
Fallback SPA menangkapnya. Permintaan API yang mengembalikan index.html dengan status 200 bermakna peraturan fallback terlalu luas. Kecualikan /api/* daripadanya.

Permintaan aplikasi yang diterbitkan ke /api/orders mengembalikan 404, tetapi ia berfungsi dalam pratonton. Semak bagaimana /api dilalukan dalam pratonton berbanding aplikasi yang diterbitkan, dan jadikan bahagian hadapan yang diterbitkan mencapai bahagian belakang dengan cara yang sama.

Langkah 7: Ubah hala URL lama

Jika anda berpindah dari laman lain atau menyusun semula strukturnya, URL lama yang masih digunakan orang dan enjin carian akan 404. Tambah ubah hala 301 (kekal) dari setiap URL lama ke rumah barunya. Simpan senarai dan uji sampel selepas pelancaran. Panduan kami tentang memindahkan laman WordPress meliputi cara membina senarai tersebut.

Langkah 8: Semak domain

Jika aplikasi berfungsi di alamat hos tetapi 404 pada domain tersuai anda, domain mungkin menunjuk ke projek yang salah, atau hos belum melampirkan domain itu pada laman anda. Semak rekod DNS dan tetapan domain hos. Lihat cara menyambungkan domain tersuai.

Jadikan halaman 404 sebenar anda berguna

Sesetengah 404 adalah betul: seseorang salah menaip URL. Jadikan halaman itu membantu:

Mesej ringkas dan pautan ke halaman utama serta bahagian utama
Kotak carian, jika laman mempunyai carian
Header dan navigasi yang sama seperti bahagian lain laman

Jika persediaan anda membenarkan, kembalikan status 404 sebenar untuk halaman yang tidak wujud. Mesej “tidak dijumpai” yang dikembalikan dengan status 200 ialah apa yang enjin carian panggil soft 404, dan ia boleh membazirkan masa rayapan mereka serta mengelirukan pengindeksan.

Kesilapan biasa

Hanya menguji dengan mengklik. Sentiasa uji dengan menampal URL dalam tab baharu dan menyegarkan.
Fallback yang menangkap segalanya. Aset dan laluan API mengembalikan index.html, yang menyebabkan halaman kosong dan ralat API yang mengelirukan.
Huruf besar-kecil yang tidak sepadan yang hanya rosak di pelayan.
Mendeploy folder sumber dan bukannya output binaan.
Menyusun semula URL tanpa ubah hala. Setiap pautan lama menjadi 404.

404 dalam Mythex

Di Mythex anda menerbitkan dari ruang kerja, dan bahagian hadapan statik di-deploy sebagai laman statik. Jika halaman yang diterbitkan memberi 404, berikan ejen URL tepat, sama ada ia berlaku semasa menyegarkan atau semasa mengklik, dan apa yang ditunjukkan tab Network, dan minta ia menyemak penghalaan. Terbitkan semula selepas pembetulan, kerana aplikasi langsung ialah syot kilat sehingga anda menerbitkan semula. Jika anda baru-baru ini menukar projek dan laman langsung kelihatan lama, terbitkan semula dan segarkan dengan paksa. Gunakan Fix with AI dalam dialog penerbitan jika binaan gagal. Lihat Cara menerbitkan dan penyelesaian masalah penerbitan dalam dokumentasi, dan panduan kami tentang menyahpepijat aplikasi yang dibina AI.

Senarai semak 404

Dicatat URL tepat yang memberi 404 dan sama ada semasa mengklik, menyegarkan atau kedua-duanya
Fallback SPA menghidangkan index.html untuk laluan aplikasi, dengan status 200
Fallback mengecualikan fail sebenar dan /api/*
Penghala mempunyai laluan tangkap-semua “tidak dijumpai”
Folder output binaan ialah yang diterbitkan, dan binaan berjaya
Laluan asas sepadan dengan tempat aplikasi dihidangkan
Huruf besar-kecil nama fail sepadan dengan setiap rujukan
Laluan aset bermula dengan /
Gaya slash akhir konsisten
Laluan API di-deploy dan dilalukan dalam pengeluaran
Ubah hala 301 untuk URL lama
Pautan dalam diuji dengan menampalnya dalam tab baharu

Soalan lazim

Kenapa saya dapat 404 apabila menyegarkan halaman dalam aplikasi React saya?

Dalam aplikasi halaman tunggal, laluan seperti /dashboard hanya wujud dalam JavaScript. Mengklik pautan berfungsi kerana penghala mengendalikannya dalam pelayar, tetapi apabila anda menyegarkan, pelayan diminta untuk fail /dashboard yang tidak wujud. Penyelesaiannya ialah peraturan fallback yang menghidangkan index.html untuk laluan aplikasi.

Bagaimana saya menambah fallback SPA pada Netlify, Vercel atau Nginx?

Pada Netlify, tambah fail _redirects dengan /* /index.html 200. Pada Vercel, tambah rewrite dalam vercel.json yang menghantar semua laluan ke /index.html. Pada Nginx, gunakan try_files $uri $uri/ /index.html; dalam blok location. Semak dokumentasi hos anda, kerana peraturan sentiasa berubah.

Kenapa imej atau fail saya 404 selepas deploy?

Biasanya fail itu tiada dalam output binaan, huruf besar-kecil laluan tidak sepadan (pelayan selalunya sensitif huruf besar-kecil walaupun komputer riba anda tidak), atau laluan itu relatif sedangkan ia sepatutnya bermula dengan garis miring.

Patutkah halaman yang hilang mengembalikan status 404 sebenar?

Ya. Hidangkan halaman tidak-dijumpai yang membantu, tetapi dengan status 404 jika persediaan anda membenarkan. Enjin carian menganggap mesej “tidak dijumpai” yang dikembalikan dengan status 200 sebagai soft 404, yang membazirkan masa rayapan dan boleh mengelirukan pengindeksan.