vue项目history模式部署到服务器后 ,根路径访问没有问题,但是进入其他功能再刷新页面就会出现404,因为你没在nginx或者apache配置上面加上重定向跳转。
解决办法,只需要加上这段配置:
nginx配置内容:
location / {try_files $uri $uri/ @router;index index.html;}location @router {rewrite ^.*$ /index.html last;}
apache配置内容:
RewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.*)$ ./index.html [L]
这句配置的意思是每次匹配url路径时候找不到对应静态资源时候调制跳转到index.html文件
解析为什么会这样(针对路由在history模式下):
因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404。
因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误。
想要history模式正常访问,还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
也就是在服务端修改404错误页面的配置路径,让其指向到index.html。