Rumah  >  Artikel  >  hujung hadapan web  >  Apakah sebab skrin putih bertindak balas?

Apakah sebab skrin putih bertindak balas?

藏色散人
藏色散人asal
2023-01-05 10:11:222159semak imbas

Sebab skrin putih bertindak balas ialah apabila pemalam HtmlWebpackPlugin memperkenalkan bundle.js, ia memperkenalkan laluan relatif Penyelesaiannya ialah: 1. Tambahkan publicPath pada konfigurasi output; mod, tetapkan sejarahApiFallback Ia boleh menjadi benar.

Apakah sebab skrin putih bertindak balas?

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah sebab skrin putih bertindak balas?

Masalah skrin putih dalam mod sejarah tindak balas

Baru-baru ini, apabila saya menggunakan reaksi semula, kerana saya tidak mahu menggunakan cincangan hodoh, saya menukar mod penghalaan ke sejarah, yang mengakibatkan beberapa masalah, seperti menyegarkan skrin putih dan gagal memuatkan imej Di sini kita bercakap tentang penyelesaiannya.

Punca

Pertama sekali, mari kita bincangkan tentang sebab siri fenomena ini.

Tiada masalah apabila kami menyegarkan halaman di bawah laluan http://localhost:xxxx/ Semuanya kelihatan seperti biasa Tetapi apabila kita bertukar kepada submodul, skrin akan menjadi putih apabila menyegarkan.

Apakah sebab skrin putih bertindak balas?

Kami melihat bahawa ia akan mencari bundle.js daripada laluan semasa. Kerana apabila pemalam HtmlWebpackPlugin membantu kami memperkenalkan bundle.js, ia memperkenalkan laluan relatif

Apakah sebab skrin putih bertindak balas?

Oleh itu, apabila menyegarkan, ia dicari berbanding dengan url semasa.

Penyelesaian

Setelah sebabnya jelas, penyelesaiannya sudah sedia. Kita hanya perlu mencari cara untuk menjadikan laluan pemuatan bundle.js bermula dari direktori akar apabila menyegarkan, bukannya mengikut url semasa.

1. Tambahkan publicPath pada konfigurasi output

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

Apakah maksud publicPath? Terdapat ayat sedemikian dalam laman web rasmi

webpack-dev-server juga akan menggunakan publicPath sebagai asas secara lalai, dan menggunakannya untuk memutuskan dalam direktori mana untuk membolehkan perkhidmatan mengakses fail yang dikeluarkan oleh webpack.

Pemahaman mudah, sumber statik anda akan dimuatkan daripada laluan ini

publicPath: "/" //Loading path '/assets/js/bundle.js'

In dengan cara ini, setiap muat semula akan mula dimuatkan daripada direktori akar, jadi bundle.js kami tidak akan hilang. Masalah yang sama berlaku apabila imej tidak dapat dimuatkan.

2. historyApiFallback of webpack-dev-server

Dalam mod sejarah, devServer perlu mengkonfigurasi historyApiFallback kepada benar

devServer: {
historyApiFallback: true
}

Beri perhatian kepada dua perkara di atas, dan mod sejarah akan berfungsi seperti biasa digunakan. Jika ada sebab lain, sila berasa bebas untuk menambahnya.

ps: Selepas projek digunakan pada pelayan, skrin halaman menjadi kosong tetapan yang berkaitan perlu dibuat di latar belakang, yang tidak akan dibincangkan di sini.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah sebab skrin putih bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn