记一次安卓环境钉钉H5踩坑

60

遭遇问题

写了一个需要运行在钉钉中的 H5 页面，在 iOS 上测试都是没有问题的，信心日益膨胀。直到临时用 android 试了一下；当头一棒，直接黑屏。
 尝试着改了改，情况略有好转，背景图加载出来了，但是所有的 js 都没有执行。

问题解析

经过了一段时间的折腾，总算定位了问题；是一个平平无奇的兼容性问题；虽然是 android 12 的系统了，但是钉钉内置的浏览器仍是 chrome 69。所以解决的办法显而易见，打包的时候，支持 chrome 69即可。

Vite 的解决方法

本项目是 vite 打包的，修改 vite.config.ts 的配置如下 

yarn add terser -D
yarn add  @vitejs/plugin-legacy -D

Terser must be installed because plugin-legacy uses Terser for minification. 

import legacy from '@vitejs/plugin-legacy'

 export default defineConfig({
 ...
  plugins: [
     ...
    legacy({
      targets: ['Chrome 69'],
      modernPolyfills: true,
    }),
  ],
  build: {
    target: ['Chrome 69'],
  },
})

相关文档：

Vite 的 build.target
 plugin-legacy 相关配置

Comments
Write a Comment