我们使用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
