history模式下刷新页面进入404解决方案

history模式的详细配置请移步官方文档vue路由history模式

文档里有说到history模式下如果后端，前端不做任何处理，刷新页面就会报404.
后端配置请看官方文档，这里只介绍一下前端需要配置的地方

第一步：如何切换history模式 在router.js中配置

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // 切换路由后滚动条置顶
  scrollBehavior() {
    return {
      x: 0,
      y: 0
    }
  }
})

export default router

第二步在vue.config.js中加上如下配置

module.exports = {
    publicPath: '/',   //这个必须，引入静态资源需要从根路径引入，否则会找不到静态资源
    devServer: {
        // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
        historyApiFallback: {
            index: '/index.html' //与output的publicPath
        },
      },
}