uniapp 打包h5 部署找不到文件如何解决？

在uniapp中打包H5项目后，部署到服务器上访问时提示找不到文件，应该怎么解决？具体表现是页面空白或404错误，本地运行正常但部署后资源路径出现问题。检查了manifest.json的基础路径配置和nginx的rewrite规则，依然无法正常加载静态资源。请问正确的部署配置流程是什么？是否需要特殊处理路由模式或修改publicPath？

2 回复

检查打包路径是否正确，确保静态资源路径配置为相对路径。在 manifest.json 中设置 h5.router.base 为 ./，重新打包部署即可。


UniApp 打包 H5 部署后出现文件找不到的问题，通常是由于路径配置错误或服务器设置不当导致的。以下是常见原因及解决方案：

1. 修改 vue.config.js 中的 publicPath

  • 问题：默认打包后的资源路径为绝对路径（如 /static/），部署到子目录时可能无法加载。
  • 解决：在项目根目录的 vue.config.js 中配置 publicPath 为相对路径 ./：
    module.exports = {
  publicPath: './'
};
  • 重新打包后，所有资源路径会变为相对路径（如 ./static/js/app.js），适应子目录部署。

2. 检查路由模式（如使用 history 模式）

  • 问题：H5 默认使用 hash 路由，若改为 history 模式且未配置服务器支持，刷新页面会 404。
  • 解决：
    • 在 src/main.js 中确认路由模式：
      const router = new VueRouter({
  mode: 'hash' // 推荐使用 hash 模式避免部署问题
});
    • 若必须用 history 模式，需配置服务器（如 Nginx）重定向到 index.html：
      location / {
  try_files $uri $uri/ /index.html;
}

3. 服务器配置静态资源缓存和 MIME 类型

  • 问题：服务器未正确识别文件类型（如 .js、.css）。
  • 解决：确保服务器配置了正确的 MIME 类型，并允许静态资源访问。

4. 验证打包文件完整性

  • 检查 dist/build/h5 目录是否生成完整文件（如 index.html、static 文件夹）。
  • 若文件缺失，重新运行 npm run build:h5 并确保无报错。

5. 部署到子目录时的额外配置

  • 若部署到非根目录（如 https://domain.com/subdir/），需同时：
    • 设置 publicPath: './'。
    • 在 h5.router.base 中配置基础路径（manifest.json）：
      "h5": {
  "router": {
    "base": "/subdir/"
  }
}

总结步骤：

  1. 配置 vue.config.js 中的 publicPath 为 ./。
  2. 使用 hash 路由模式，或配置服务器支持 history 模式。
  3. 将 dist/build/h5 内的全部文件上传至服务器，确保路径正确。
  4. 若问题持续，检查浏览器开发者工具的网络面板，确认具体失败的文件路径。

按照以上调整后，重新打包并部署即可解决。

回到顶部