uni-app alpha 最近版本打包h5异常 打包后路径及跳转位置错误 根本没打包成功

謝謝

在使用 uni-app 打包 H5 时，如果出现路径及跳转位置错误的情况，可能是由于以下几个原因导致的。以下是一些排查和解决方案：

1. 检查 manifest.json 配置

• 路由模式：在 manifest.json 中，确保 h5 配置下的 router 模式正确。通常有两种模式：
  • hash 模式：URL 中会带有 #，例如 http://example.com/#/page。
  • history 模式：URL 中没有 #，例如 http://example.com/page。
  • 如果你使用的是 history 模式，需要确保服务器配置正确，避免出现 404 错误。

"h5": {
  "router": {
    "mode": "hash" // 或 "history"
  }
}

2. 检查 pages.json 配置

• 页面路径：确保 pages.json 中的页面路径配置正确，路径应该以 / 开头。
• 分包配置：如果你使用了分包加载，确保分包路径和配置正确。

3. 检查打包后的文件结构

• 打包完成后，检查生成的 dist 目录下的文件结构，确保所有页面和资源文件都被正确打包。
• 如果某些文件缺失，可能是构建过程中出现了问题，可以尝试清理缓存后重新打包。

4. 检查 publicPath 配置

• 在 vue.config.js 中，检查 publicPath 配置是否正确。publicPath 决定了打包后资源的加载路径。
• 如果你的项目部署在子目录下，publicPath 应该设置为子目录的路径。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-sub-directory/' : '/'
}

5. 清理缓存并重新打包

• 有时缓存可能会导致打包异常，尝试清理缓存后重新打包。
• 你可以删除 node_modules 和 dist 目录，然后重新安装依赖并打包。

rm -rf node_modules dist
npm install
npm run build:h5

6. 检查网络请求和资源路径

• 打开浏览器的开发者工具，检查网络请求和资源加载情况，确保所有资源路径正确。
• 如果资源路径错误，可能是因为 publicPath 配置不正确或资源路径在代码中写死。

7. 查看打包日志

• 查看打包过程中的日志输出，检查是否有错误或警告信息。这些信息可能会给出问题的线索。

8. 升级 uni-app 版本

• 如果你使用的是 uni-app 的 alpha 版本，可能会存在一些不稳定问题。尝试升级到最新的稳定版本，或者回退到一个已知稳定的版本。

9. 服务器配置

• 如果你使用的是 history 模式，确保服务器配置正确，避免出现 404 错误。例如，在 Nginx 中，可以添加以下配置：

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