钉钉访问h5白屏的问题

背景

最近准备做个钉钉的网页应用，新建了一个vue3+vite+vant的环境，随便写了一点准备看看效果时，准备用钉钉看一下效时，发现竟然白屏了。然后用手机自带浏览器，微信/支付宝访问一切都正常。然后用vConsole看了下，也没有报错。看了好多人说是因为钉钉内置浏览器不支持es6，我就又试了下Promise，发现钉钉是支持的…不废话了上代码

在index.html加上

<script>
      !(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);
    </script>

内容参考: 链接

打包后白屏

主要是当时开发时，钉钉的浏览器内核是chrome 69，需要安装vite的插件@vitejs/plugin-legacy，兼容下chrome69就可以了

import legacy from '@vitejs/plugin-legacy'

plugins: [
            vue(),
            ...
            legacy({
                targets: ['defaults', 'not IE 11', 'chrome 69'],
            })
        ]

后续就不存在这个问题了

目前钉钉浏览器已经是chrome 100，应该是不会白屏了…