# Vueqr 依赖库中 未兼容 globalThis ,导致元素(绑带路由跳转)点击事件无效

# 描述

  • vite + vue3 的多渠道(APP、小程序)嵌入H5项目

vueqr 库使用了 ES2020 的 globalThis 全局变量,但是有没有做兼容,导致低版本可能是Android Webview 60 版本以下的,提供不了这个变量,阻塞了跳转。

引入 vconsole 后开到报错,我就有过是 跳转的目标页面 报错了,所以无法跳转的想法,但是没有思路去验证。看到 globalThis 的报错,没有仔细的看报错的来源 awesomeqr ,依赖库里面没有该依赖,就没招了。

其实是 vueqr 本省 借鉴和使用了 awesomeqr 这个库,纯属于 依赖的依赖

# 解决方案

  • 提供自定义的 globalThis 补丁(Polyfills),
  • 在项目main.js 引入 import './utils/globalThisPolyfills.js' *// 兼容 globalThis*
// globalThisPolyfills.js

!(function (t) {
  function e() {
    var e = this || self;
    (e.globalThis = e), delete t.prototype._T_;
  }
  'object' != typeof globalThis &&
    (this
      ? e()
      : (t.defineProperty(t.prototype, '_T_', {
          configurable: !0,
          get: e,
        }),
        _T_));
})(Object);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17