vite-uni-app打包H5后运行直接跳转404

发布于 1周前 作者 eggper 来自 Uni-App

vite-uni-app打包H5后运行直接跳转404 我在用vue3+uniapp+vite中使用hash模式打包的H5，我配置了通配路径，然后出现了开发环境正常显示，但是打包后出现了访问首页直接跳转到了404。

以下是我的配置，

因为打包H5，必须要通配路径，不然进入H5就会报未匹配到通配符路径，或者*通配符必须配合redirect使用，所以我加了通配路径。

router/index.js 通配路径

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

manifest.config.js 配置

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

vite.config.js 配置

base: './',

Harmonyos Next教程
1 回复

在处理 vite-uni-app 打包 H5 后运行直接跳转 404 的问题时，通常这类问题是由于路由配置不当或服务器配置不正确导致的。以下是一些可能的原因和相应的代码案例来解决这个问题。

1. 确保正确的 base 配置

在 vite.config.js 中，确保你设置了正确的 base 选项，这通常与你的部署路径相匹配。

// vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
  plugins: [uni()],
  base: process.env.NODE_ENV === 'production' ? '/your-deployment-path/' : '/',
  // 其他配置...
});

2. 配置 HTML5+ Runtime 的路由

如果你使用的是 uni-app 的 HTML5+ Runtime，确保在 manifest.json 中正确配置了路由信息。

// manifest.json
{
  "mp-weixin": { // 其他平台配置... },
  "h5": {
    "router": {
      "mode": "history", // 使用 HTML5 History 模式
      "base": "/your-deployment-path/" // 与 vite.config.js 中的 base 一致
    }
  }
}

3. 服务器配置

确保你的服务器支持并正确配置了单页应用（SPA）的路由。对于 Apache 服务器，你可以在 .htaccess 文件中添加以下规则：

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

对于 Nginx 服务器，你可以在配置文件中添加以下规则：

location /your-deployment-path/ {
    try_files $uri $uri/ /your-deployment-path/index.html;
}

4. 检查构建输出

确保构建输出没有问题，可以通过运行以下命令来检查构建日志：

npm run build:h5

查看输出目录（通常是 dist/build/h5）中的文件结构，确保 index.html 和其他资源文件正确生成。

总结

正确配置 vite.config.js 和 manifest.json 中的 base 选项，以及确保服务器支持 SPA 路由是解决 404 问题的关键。如果问题依然存在，建议检查构建输出和服务器日志，以获取更多线索。希望这些代码案例能帮助你解决问题。

回到顶部