vue页面刷新404错误问题 uni-app history路由模式刷新页面错误

最新推荐文章于 2024-10-12 20:31:32 发布

原创最新推荐文章于 2024-10-12 20:31:32 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

20 篇文章

订阅专栏

当使用uni-app或vue的history路由模式打包上线后，页面刷新可能导致404错误。为了解决这个问题，可以配置nginx或apache服务器。对于nginx，可以在location区块中设置alias和try_files指令；对于apache，启用mod_rewrite模块并配置RewriteRule。配置正确后，即使页面刷新，也会重定向到index.html，避免404错误。

uni-app以及vue使用history路由模式，打包上线以后，页面刷新会找不到页面404错误，可以通过配置nginx或apache来解决这个问题。
nginx配置：

 location ^~ /path { #path是你的网站所在的子目录，可去掉
      alias  /www/wwwroot/m.taxgo.cn/public/path; 
      try_files $uri $uri/ /index.html last;#依次尝试访问，$uri变量代表的是访问地址，不存在就访问index.html
      index  index.html;
 }

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>