How to hide the # symbol in the access path when Uniapp is published as H5 version

Uniapp has become very popular in developing mobile APPs and small programs. Sometimes we need to generate an H5/wap version through uniapp packaging so that the H5 function can synchronize the functions of the APP applet instead of rewriting the function module code of one terminal.

But I found that when developing the H5 version, our page access path will have a "#" sign, for example: https://h5.shopwind.net/#/pages/index/index, this is not only It affects the appearance, and can also be filtered to the "#" sign on some occasions, resulting in routing errors. For example, when we log in to the WeChat official account on the H5 side, the return address with the "#" sign will be automatically filtered out, resulting in failure. Call back to the correct page. The solution is as follows:

1. Use the Hbuilder tool to open the manifest.json file and navigate to: H5 Configuration->Routing Mode->Select the history mode

At this time, you will find that after opening the page, the "#" sign has been removed and it can be accessed normally. However, when we refresh the page, a "404" error is reported. We open our eyes carefully. I checked whether the URL was wrong and found that it was not wrong! ! This is strange!
Don't worry, to solve the above problem, you need to understand the following:
1) hash - the # symbol in the URL in the address bar. Although the hash appears in the URL, it will not be included in the HTTP request and has no impact on the backend at all, so changing the hash will not reload the page.
2) history - takes advantage of the new pushState() and replaceState() methods in the HTML5 History Interface. A specific browser needs to support history mode. A 404 error will occur and background configuration is required.
3) In hash mode, only the content before the hash symbol will be included in the request, such as https://www.shopwind.net, so for the backend, even if full coverage of routing is not achieved, It will not return a 404 error;
4) In history mode, the front-end URL must be consistent with the URL that actually initiates the request to the back-end, such as https://www.shopwind.net/a/. If the backend lacks routing processing for /a, a 404 error will be returned

2. Server configuration

After packaging the H5 code and uploading it to the server, pseudo-static needs to be done configuration.

Configuring nginx in history mode

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

Configuring Apache in history mode

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

H5 case reference: https://h5.shopwind.net
uniapp development exchange

The above is the detailed content of How to hide the # symbol in the access path when Uniapp is published as H5 version. For more information, please follow other related articles on the PHP Chinese website!