网站icp备案怎么做,wordpress 输出豆瓣,科技小发明小制作大全 小学生,WordPress数据表性能问题描述#xff1a;在本地启动项目一切正常#xff0c;部署到服务器上线后出现BUG#xff0c;项目刷新页面出现404。
起初以为是自己路由守卫或是token丢失问题#xff0c;找了一圈终于解决了 产生原因#xff1a;我们打开vue/react打包后生成的dist文件夹#xff0c;可…问题描述在本地启动项目一切正常部署到服务器上线后出现BUG项目刷新页面出现404。
起初以为是自己路由守卫或是token丢失问题找了一圈终于解决了 产生原因我们打开vue/react打包后生成的dist文件夹可以看到只有一个 index.html 文件及一些静态资源这个是因为vue/react是单页应用(SPA)只有一个index.html作为入口文件其它的路由都是通过JS来进行跳转的。 而网页上显示的是静态资源的绝对路径虽然浏览器上的url变化了但实际上服务器的静态资源是没有更改路径的始终只有index.html这一个入口所以刷新就会导致url上的路径和服务器上的资源不匹配无法找到静态资源从而报错404。多页应用因为有多个入口文件所以不会有这样的问题 解决方案一vue router 的 mode 改成hash export default new Router({
2 // mode: history,
3 mode: hash,
4 routes
5 })
解决方案二配置nginx将任意页面都重定向到 index.html
在服务器的nginx配置文件里添加如下代码再重启nginx刷新网页即可
location / {try_files $uri $uri/ rewrites;index index.html;
}location rewrites {rewrite ^.*$ /index.html last;
}扩展1: 为什么hash模式下没有刷新页面404 问题
hash路由的原理是onhashchange事件hash模式下仅 hash符号之前的内容会被包含在http请求中如www.xxx.com/#/loginhash的值为 #/loginhash值#/login虽然出现在 url中但不会被包括在http请求中其只会请求www.xxx.com对服务端完全没有影响因此改变hash不会重新加载页面即使服务器nginx没有配置location也不会返回404错误。
它的特点在于hash 虽然出现在 URL 中但不会被包括在 HTTP 请求中对服务端完全没有影响因此改变 hash 不会重新加载页面
而history模式原理是利用了h5的Interface 中的pushState()方法和replaceState()方法它们提供了对浏览器历史记录进行修改的功能但当它们执行修改时虽然改变了当前的 URL但浏览器不会立即向服务器发送请求因此history模式正常页面操作跳转路由是不会再次发送http资源请求的。但是当刷新的时候由于url已经改变如www.xxx.com/login会完整地向服务器请求相关资源所以就会造成对应路径的资源找不到从而返回404。
但是使用hash路由url上会携带#号标志且history模式的同步更新浏览器历史记录功能就没有了。
扩展2vue路由的两种模式 hash和history的区别
1. 直观区别 hash模式url带 # 号history模式不带 # 号。
2. 深层区别
hash模式url里面永远带着#号我们在开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式因为history模式没有#号是个正常的url适合推广宣传。功能也有区别比如我们在开发app的时候有分享页面那么这个分享出去的页面就是用vue或是react做的再把这个页面分享到第三方的app里有的app里面url是不允许带有#号的所以要将#号去除那么就要使用history模式但是使用history模式还有一个问题就是在访问二级页面的时候做刷新操作会出现404错误那么就需要使用上述的方法或者和后端配合让他配置一下apache或是nginx的url重定向重定向到你的首页路由上就ok啦。
