vite创建的uniapp项目，打包H5后，出现访问首页404，手动切换其他路由访问正常，返回首页就404

Question

我在用vue3+uniapp+vite中打包的H5，我配置了通配路径，然后出现了开发环境正常显示，但是打包后出现了访问首页直接跳转到了404。
以下是我的配置，
因为打包H5，必须要通配路径，不然进入H5就会报未匹配到通配符路径，或者*通配符必须配合 redirect 使用，所以我加了通配路径。
router/index.js 通配路径

const router = createRouter({  
  pages,  
  addRoutes: [  
    {  
      path: '*',  
      redirect: () => {  
        return { path: '/pages/home/404' }  
      },  
    },  
  ],  
})

manifest.config.js配置

h5: {  
    router: {  
      mode: 'hash',  
      base: './',  
    },  
  },

vite.config.js配置

base: './',

大家帮我看下，到底要怎么改才能打包后的H5预览正常啊。
目前这种做法，首页打开就是404，但是我修改路径后可以访问，但只要返回首页就是404.

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从你提供的配置来看，你正在使用uniapp和vite创建一个H5项目，并且使用了通配路径来处理未匹配的路由，将它们重定向到'/pages/home/404'。问题是在打包后访问首页时出现了404错误，而其他路由可以正常访问。这种情况可能由以下几个原因引起：

1. 首页路径配置问题：确保你的首页路径设置正确。在打包后的项目中，首页可能不是以根路径'/'开头，而是具有特定的名称或格式。尝试在路由配置中显式定义首页路径，而不是使用通配符。
2. 服务器配置问题：确保服务器正确配置以处理前端路由。如果你的服务器配置不正确，它可能无法正确响应单页面应用程序（SPA）的路由变化。尝试调整服务器配置以支持前端路由。
3. 打包配置问题：检查vite和uniapp的打包配置，确保它们正确地包含了首页和路由相关的文件。有时候，打包过程中可能会出现问题，导致某些文件丢失或路径不正确。

针对上述问题，你可以尝试以下解决方案：

• 在router/index.js中显式定义首页路径，而不是使用通配符。例如：

const router = createRouter({  
  pages,  
  routes: [  
    {  
      path: '/',  
      component: YourHomePageComponent,  
    },  
    // 其他路由配置...
    {  
      path: '*',  
      redirect: () => {  
        return { path: '/pages/home/404' }  
      },  
    },  
  ],  
})

• 检查服务器配置，确保它支持前端路由。如果你使用的是像Nginx或Apache这样的服务器，确保它们正确配置以处理SPA的路由变化。例如，Nginx可以配置为始终返回index.html文件，由前端JavaScript代码处理路由逻辑。
• 检查vite和uniapp的打包配置，确保没有遗漏任何重要的文件或路径设置。如果问题仍然存在，你可以尝试查看打包后的项目结构，检查文件路径和名称是否正确。如果可能的话，尝试在一个简单的uniapp项目中重现这个问题，以确定问题是否与特定配置或项目结构有关。希望这些建议能帮助你解决问题！如果还有其他问题或需要进一步的帮助，请随时提问。