uni-app vue3版本打包h5后 webview页面跳转报错（uni[e] is not a function）

牛逼

在使用 uni-app Vue3 版本打包 H5 时，如果遇到 uni[e] is not a function 的错误，通常是因为在 H5 环境中，uni 对象的方法无法正常调用。这种情况可能是由于 H5 环境下 uni 对象的某些方法不支持或未正确加载导致的。

以下是一些可能的解决方案和排查步骤：

1. 检查 uni 方法的兼容性

• 确认你调用的 uni 方法在 H5 环境中是否支持。例如，uni.navigateTo、uni.redirectTo 等方法在 H5 中可能无法直接使用。
• H5 环境下的页面跳转通常需要使用 window.location.href 或 Vue Router 来实现。

2. 使用条件编译

• 使用 uni-app 的条件编译功能，针对不同平台编写不同的代码。例如：

  // #ifdef H5
  window.location.href = '/new-page';
  // #endif
  
  // #ifndef H5
  uni.navigateTo({
    url: '/pages/new-page'
  });
  // #endif

3. 检查 uni 对象是否存在

• 在 H5 环境中，确保 uni 对象已正确加载。可以在代码中打印 uni 对象，检查其是否可用：

  console.log(uni);

• 如果 uni 对象未加载或方法缺失，可能需要检查 uni-app 的版本或配置。

4. 使用 Vue Router 替代

• 在 H5 环境中，建议直接使用 Vue Router 进行页面跳转。例如：

  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  router.push('/new-page');

5. 检查 uni-app 版本

• 确保你使用的 uni-app 版本支持 Vue3。如果版本较旧，可能会出现兼容性问题。
• 更新到最新版本的 uni-app：

  npm install @dcloudio/uni-app@latest

6. 检查打包配置

• 确认 H5 打包配置是否正确。检查 manifest.json 中的 h5 配置项，确保没有遗漏或错误。

7. 调试具体错误

• 打开浏览器的开发者工具，查看具体的报错信息和调用栈，定位问题所在。
• 如果错误信息指向某个插件或库，可能需要检查该插件是否兼容 Vue3 或 H5 环境。

8. 示例代码

以下是一个兼容 H5 和小程序的跳转示例：

export default {
  methods: {
    navigateToPage() {
      // #ifdef H5
      window.location.href = '/new-page';
      // #endif

      // #ifndef H5
      uni.navigateTo({
        url: '/pages/new-page'
      });
      // #endif
    }
  }
};