vue页面刷新报错Cannot GET /...，控制台报错404：GET http://localhost:8080/... 404 (Not Found)

目录

遇到的问题

解决方法

拓展:hash与history区别

---

遇到的问题

一开始vue页面访问正常，一刷新报如下错误：

控制台报错：

页面报错：

解决方法

在配置路由的文件中（本人是src/router/index.js文件），将vue路由模式mode: 'history' 修改为

mode: 'hash'

重新运行，问题解决！！！

拓展:hash与history区别

不同之处有三点。

1.原理不同。
hash模式的实现原理是通过监听hashChange事件来实现的，前端js把当前hash地址对应的组件渲染到浏览器中。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。

2.表现不同。
hash模式会在地址栏中有#号，而history模式没有；同时由于history模式的实现原理用到H5的新特性，所以它对浏览器的兼容性有要求(IE >= 10)。

3.history模式特点
history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式：需要和后端人配合让他配置一下 apache 或是 nginx 的 url 重定向，重定向到你的首页路由上就OK啦。