UniappをH5版として公開する場合にアクセスパスの#記号を非表示にする方法

Uniapp は、モバイル APP や小規模プログラムの開発において非常に人気があります。場合によっては、1 つの端末の汎用モジュール コードを書き換えるのではなく、H5 関数が APP アプレットの機能を同期できるように、uniapp パッケージ化を通じて H5/wap バージョンを生成する必要があります。

しかし、H5 バージョンを開発する場合、ページのアクセス パスには「#」記号が含まれることがわかりました。たとえば、https://h5.shopwind.net/#/pages/index/index、これはは見た目に影響するだけでなく、場合によっては「#」記号にフィルタリングされてルーティング エラーが発生することもあります。たとえば、H5 側で WeChat 公式アカウントにログインすると、返信アドレスに「#」記号は自動的に除外され、失敗します。正しいページに戻ってください。解決策は次のとおりです:

1. Hbuilder ツールを使用して、manifest.json ファイルを開き、次の場所に移動します。 H5 設定 -> ルーティング モード -> 履歴モードを選択

この時点で、ページを開くと「#」記号が削除されていることがわかります。正常にアクセスできるのですが、ページを更新すると「404」エラーが表示され、目を凝らしてURLが間違っていないか確認してみると、間違っていませんでした！ ！これはおかしい！
心配しないでください。上記の問題を解決するには、次のことを理解する必要があります:
1) ハッシュ - アドレス バーの URL に含まれる # 記号。ハッシュは URL に表示されますが、HTTP リクエストには含まれず、バックエンドにはまったく影響を与えないため、ハッシュを変更してもページはリロードされません。
2) 履歴 - HTML5 履歴インターフェイスの新しい PushState() メソッドと replaceState() メソッドを利用します。特定のブラウザは履歴モードをサポートする必要があります。404 エラーが発生し、バックグラウンド設定が必要になります。
3) ハッシュ モードでは、https://www.shopwind.net など、ハッシュ シンボルの前のコンテンツのみがリクエストに含まれるため、バックエンドでは、ルーティングの完全なカバレッジが達成されない場合でも、 404 エラーは返されません;
4) 履歴モードでは、フロントエンド URL は、実際にバックエンドへのリクエストを開始する URL (https://www.shopwind.net など) と一致している必要があります。 /a/。バックエンドに /a のルーティング処理が不足している場合、404 エラーが返されます。

2. サーバー構成

H5 コードをパッケージ化してサーバーにアップロードした後、擬似静的な設定を行う必要があります。

履歴モードでの nginx の構成

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

履歴モードでの Apache の構成

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

H5 ケース リファレンス: https://h5.shopwind.net
uniapp 開発交流

以上がUniappをH5版として公開する場合にアクセスパスの#記号を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。