西安模板网站服务商,企业申请域名,h5制作网站,沈阳市浑南区城乡建设局网站Vue项目打包部署到线上后,刷新页面会提示404,下面这篇文章主要给大家介绍了关于vue/react项目刷新页面出现404报错的原因及解决办法,文中将解决的办法介绍的很详细,需要的朋友可以参考下
背景解决办法 法1#xff1a;将vue/react路由模式由history路由改为has…Vue项目打包部署到线上后,刷新页面会提示404,下面这篇文章主要给大家介绍了关于vue/react项目刷新页面出现404报错的原因及解决办法,文中将解决的办法介绍的很详细,需要的朋友可以参考下
背景解决办法 法1将vue/react路由模式由history路由改为hash路由法2在服务器nginx配置文件里添加如下代码再重启nginx刷新网页就OK了文章参考 总结 背景 问题描述vue/react项目正常的页面操作跳转不会出现404的问题但是一旦刷新就会出现404报错。 产生原因我们打开vue/react打包后生成的dist文件夹可以看到只有一个 index.html 文件及一些静态资源这个是因为vue/react是单页应用(SPA)只有一个index.html作为入口文件其它的路由都是通过JS来进行跳转的。 而网页上显示的是静态资源的绝对路径虽然浏览器上的url变化了但实际上服务器的静态资源是没有更改路径的始终只有index.html这一个入口所以刷新就会导致url上的路径和服务器上的资源不匹配无法找到静态资源从而报错404。多页应用因为有多个入口文件所以不会有这样的问题。 接下来我们看看服务器上的nginx配置 server {// 监听80端口listen 80;// 定义你的站点名称server_name website.com;// 根据请求 URI 设置配置location / {// 站点根目录这里为 vue 构建出来的 dist 目录root /www/dist;// 站点初始页为index.html 或 index.htmindex index.html index.htm;}
} 根据nginx配置我们可以得出当我们在地址栏输入域名如www.xxx.com时这时会打开我们 dist 目录下的 index.html 文件然后我们再通过页面操作跳转路由进入到 www.xxx.com/login关键在这里当我们在 www.xxx.com/login 页执行刷新操作nginx location 是没有相关配置的所以就会出现 404 的情况。 解决办法 法1将vue/react路由模式由history路由改为hash路由 为什么hash模式下没有问题 hash路由的原理是onhashchange事件hash模式下仅hash符号之前的内容会被包含在http请求中如www.xxx.com/#/loginhash的值为 #/loginhash值#/login虽然出现在 url中但不会被包括在http请求中其只会请求www.xxx.com对服务端完全没有影响因此改变hash不会重新加载页面即使服务器nginx没有配置location也不会返回404错误。 history模式原理是利用了h5的Interface 中的pushState()方法和replaceState()方法它们提供了对浏览器历史记录进行修改的功能但当它们执行修改时虽然改变了当前的 URL但浏览器不会立即向服务器发送请求因此history模式正常页面操作跳转路由是不会再次发送http资源请求的。但是当刷新的时候由于url已经改变如www.xxx.com/login会完整地向服务器请求相关资源所以就会造成对应路径的资源找不到从而返回404。 但是使用hash路由url上会携带#号标志且history模式的同步更新浏览器历史记录功能就没有了。 法2在服务器nginx配置文件里添加如下代码再重启nginx刷新网页就OK了 location / {try_files $uri $uri/ rewrites;index index.html;
}
location rewrites {rewrite ^.*$ /index.html last;
}
