【vue项目】history模式部署后刷新报404

项目本地运行时候，首页子页面刷新均无问题。部署到服务器之后，刷新页面报错、出现404。

当vue项目的vue-router的mode为history路由模式时，若未进行相应的配置，可能会发生这种情况。

前端路由，即由前端来维护一个路由规则。实现有两种，一种时利用url的hash，也就是常说的锚点（#），JS通过hashChange事件来监听url的改变，IE7及以下需要轮询；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需要服务端的支持，服务端在接受到所有请求后，都指向index.html文件，或设置404页面为index.html。不然刷新时页面会出现404。
---《Vue.js实战》

官方文档有给后端配置的例子
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

后端已经将资源指向index.html仍出现这个问题，检查静态资源文件路径是否正确，这里仅以webpack4 + vue + vue-rout 自己搭建的项目为例。

如果域名为项目的根目录，资源文件引用的目录为绝对路径

//生产环境配置文件,publicPath指定资源引用的目录
webpackBaseConfig.plugins = [];

module.exports = merge(webpackBaseConfig, {
    output: {
        publicPath: '/',//项目根目录为域名
        // 将入口文件重命名为带有20位hash值得唯一文件
        filename: '[name].[hash].js'
    },
    //...
}

最后一种解决方案，将项目入口文件中的路由配置，history模式去掉就好。vue-router默认使用hash模式。

//main.js
const RouterConfig = {
    //mode: 'history',
    //...
}

微信三方登录回调地址，有#号时，接收不到code参数；微信H5支付的回调地址，不允许有#；App分享，处理特殊字符时，可能会对#进行编译；#没有/好看。