1、本地项目中要含有template.h5.html文件。
2、打开manifest.json,选择h5配置,按照图中填写,保存。
打包上传服务器后,会发现打开【已经去掉了了“#”号】的访问链接,且能正常访问,但是当我们刷新页面后,却报了“404”错误, 要解决上面这个问题,你需要了解下面的内容:
1)hash ——即地址栏URL中的#符号。 hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
2)history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持 history模式,会出现404 的情况,需要后台配置。
3)hash模式下,仅hash符号之前的内容会被包含在请求中,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;
4)history模式下,前端的url必须和实际向后端发起请求的url 一致,如https://www.xxx.com/a/ 。如果后端缺少对/a 的路由处理,将返回404错误
3、服务器配置
打包好H5代码上传到服务器还需要做伪静态的配置。
history模式下配置nginx
location / {
try_files $uri $uri/ /index.html;
}
history模式下配置Apache
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
更多服务器配置参考: 不同的历史模式