vue服务端刷新页面404，宝塔，Apache环境

是猿不是缘

于 2021-12-06 16:13:46 发布

阅读量698

点赞数

分类专栏：服务端文章标签： vue.js apache 前端

本文链接：https://blog.csdn.net/weixin_51281841/article/details/121749105

版权

服务端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在使用Vue的history模式部署到宝塔时，直接刷新页面会出现404错误。解决方法是通过Apache的重写规则，确保所有未匹配到的请求都重定向到index.html。在宝塔站点设置伪静态，添加Apache的Rewrite规则，确保未找到静态文件或目录的请求都被重定向到首页。

摘要由CSDN通过智能技术生成

由于vue是单页面程序，当router模式设置为 `history` 时，直接打包上传宝塔，在页面刷新的时候会报404的错!

文档是这样解释的：

因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

解决方法是在宝塔站点设置伪静态，放入以下代码（使用的Apache环境的话）：

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^index\.html$ - [L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule . /index.html [L]
</IfModule>