Cara menyembunyikan simbol # dalam laluan akses apabila Uniapp diterbitkan sebagai versi H5

Uniapp telah menjadi sangat popular dalam membangunkan APP mudah alih dan program kecil. Kadangkala kita perlu menjana versi H5/wap melalui pembungkusan uniapp supaya fungsi H5 boleh menyegerakkan fungsi applet APP, dan bukannya menulis semula kod modul fungsi satu hujung.

Tetapi saya mendapati bahawa apabila membangunkan versi H5, laluan akses halaman kami akan mempunyai tanda "#", contohnya: https://h5.shopwind.net/#/pages/index/index, ini bukan sahaja Ia menjejaskan penampilan, dan juga boleh ditapis ke tanda "#" pada beberapa keadaan, mengakibatkan ralat penghalaan Contohnya, apabila kita log masuk ke akaun rasmi WeChat di sebelah H5, alamat pemulangan dengan Tanda "#" akan ditapis secara automatik, mengakibatkan kegagalan Panggil kembali ke halaman yang betul Penyelesaiannya adalah seperti berikut:

1. Gunakan alat Hbuilder untuk membuka fail manifest.json dan navigasi ke: Konfigurasi H5->Mod Penghalaan->Pilih mod sejarah

Pada masa ini, anda akan mendapati bahawa selepas membuka halaman, tanda "#" telah dialih keluar dan anda boleh mengaksesnya seperti biasa. Walau bagaimanapun, apabila kami memuat semula halaman, ralat "404" dilaporkan. Kami membuka mata kami dengan berhati-hati. ! Ini pelik!
Jangan risau, untuk menyelesaikan masalah di atas, anda perlu memahami perkara berikut:
1) cincang - simbol # dalam URL dalam bar alamat. Walaupun cincangan muncul dalam URL, ia tidak akan disertakan dalam permintaan HTTP dan tidak mempunyai kesan pada bahagian belakang sama sekali, jadi menukar cincang tidak akan memuatkan semula halaman.
2) sejarah - mengambil kesempatan daripada kaedah pushState() dan replaceState() baharu dalam Antara Muka Sejarah HTML5. Penyemak imbas tertentu perlu menyokong mod sejarah Ralat 404 akan berlaku dan konfigurasi latar belakang diperlukan.
3) Dalam mod cincang, hanya kandungan sebelum simbol cincang akan disertakan dalam permintaan, seperti https://www.shopwind.net, jadi untuk bahagian belakang, walaupun liputan penuh penghalaan tidak dicapai, Ia tidak akan mengembalikan ralat 404;
4) Dalam mod sejarah, URL bahagian hadapan mesti konsisten dengan URL yang sebenarnya memulakan permintaan ke bahagian belakang, seperti https://www.shopwind.net /a/. Jika bahagian belakang tidak mempunyai pemprosesan penghalaan untuk /a, ralat 404 akan dikembalikan

2. Konfigurasi pelayan

Selepas membungkus kod H5 dan memuat naiknya ke pelayan, pseudo-statik perlu dilakukan konfigurasi.

Mengkonfigurasi nginx dalam mod sejarah

location / {
  try_files $uri $uri/ /index.html;
}

Mengkonfigurasi Apache dalam mod sejarah

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Rujukan kes H5: https://h5.shopwind.net
pertukaran pembangunan uniapp

Atas ialah kandungan terperinci Cara menyembunyikan simbol # dalam laluan akses apabila Uniapp diterbitkan sebagai versi H5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!