小白VUE学习笔记5:History模式下,打包后页面刷新访问404

Vue-Router采坑系列:History模式

首先我们可以看看官网上的说明

小白VUE学习笔记5:History模式下,打包后页面刷新访问404_第1张图片

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

所以说这里两种解决方案:

一、 不用history模式

这个就很简单了,改为hash模式。唯一的不同可能就是url的地址不好看而已。

二、后台支持配置

其实官网有很多例子,包括Apache、nodejs、Nginx等等的配置都有相关说明,只是需要注意一点
因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

这样就可以解决刷新404的问题了

你可能感兴趣的:(vue,前端)