Vue路由设置mode模式为History 中页面404的原因及解决

我们使用vue+vue-router创建单页面应用的时候，一般会在router中设置mode：history，让我们的url更美观，也利于seo，如果单单只是设置的了这个，当页面刷新或者是手动添加路径的时候就会报404错误

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

请看官网给我们的方案

image.png

当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404.解决方法，请看下图，在webpack.config.client.js 的devServer中设置

historyApiFallback:{
      index:'/index.html'//index.html为当前目录创建的template.html
}

image.png

注意：如果webpack.config.base.js中的output设置了基路径，那么historyApiFallback也要添加

webpack.config.base.js
 output: {

    filename: 'bundle.[hash:8].js',
    path: path.join(__dirname, '../dist'),
    publicPath: "/public/"
  },



webpack.config.client.js

 historyApiFallback:{
      index:'/public/index.html'
  }

image.png

image.png