uniapp(vue)打包web项目页面刷新后报404解决方案

一、问题概述

uniapp是一款优秀的跨平台开发框架，它可以帮助开发者快速构建出适用于多端的应用程序。然而，在项目打包后，有可能发现页面在刷新时会出现404错误。这无疑给用户体验带来了极大的困扰，下面我们就来分析一下这个问题。

二、原因分析

1. 路由配置问题：uniapp项目采用Vue路由，当页面刷新时，浏览器会向服务器发送请求。如果服务器无法找到对应的页面文件，就会返回404错误。

2. history模式：uniapp默认使用hash模式进行路由跳转，但在某些情况下，开发者可能需要使用history模式。在这种情况下，页面刷新后容易出现404错误。

3. 服务器配置问题：部分服务器（如Apache、Nginx）默认不支持单页面应用的路由，导致页面刷新时报404错误。

三、解决方案

1、修改路由配置

（1）将路由模式改为hash模式：

在src/router/index.js文件中，将mode: 'history'修改为mode: 'hash'。

export default new Router({
  mode: 'hash',
  routes: [
    // 路由配置
  ]
});

（2）为每个页面添加<router-view>标签：

在src/pages目录下的每个页面文件中，添加<router-view>标签，确保页面可以正常渲染。

2、修改服务器配置

（1）Apache服务器：

在.htaccess文件中添加以下代码：

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

（2）Nginx服务器：

在nginx.conf文件中添加以下代码：

location / {
  try_files $uri$uri/ /index.html;
}

3、使用Vue Router的scrollBehavior功能

在src/router/index.js文件中，添加以下代码：

const router = new Router({
  // ... 路由配置
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})


router.beforeEach((to, from, next) => {
  if (from.path === to.path) {
    next(false);
  } else {
    next();
  }
});

router.afterEach((to, from, next) => {
  window.scrollTo(0, 0);
});

为了在页面刷新后保持滚动位置，可以使用Vue Router的scrollBehavior方法。

uniapp打包项目页面刷新后报404的原因及解决方法。通过服务器配置和前端路由配置，我们可以有效地解决这个问题，提升用户体验。希望本文对您有所帮助！