服务器刷新项目报404,【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实战》

后端已经将资源指向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分享，处理特殊字符时，可能会对#进行编译；#没有/好看。