vue3在低版本手机上白屏问题，兼容低版本webview

遇到问题

在安卓10的手机上，移动端h5页面白屏，无法正常加载。在其他手机上显示正常。这是vue3界面对低版本webview不兼容的问题

一、解决方案

1.在vite.config.ts中配置legacy，处理兼容问题

主要原因是： 有些手机是旧版浏览器，但是代码使用的新的语法。这样旧的浏览器不支持新的语法。就会导致白屏兼容性问题。

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      vueDevTools(),
      legacy({
        targets: ['defaults', 'not IE 11', 'Chrome >= 53', 'Android >= 6'],
        polyfills: [
          'es.promise',
          'es.array.iterator',
          'es.object.assign',
          'es.promise.finally',
          'es.symbol',
        ],
        additionalLegacyPolyfills: [
          'core-js/stable',
          'regenerator-runtime/runtime',
        ],
        renderLegacyChunks: true,
        renderModernChunks: false,
      }),
    ],
  }
})

对其中配置的详细解释：
polyfills：垫片（意思类似于补丁），旧的浏览器不支持的功能或语法通过补丁的形式补上去。

// ... existing code ...
 targets: ['defaults', 'not IE 11', 'Chrome >= 53', 'Android >= 6'],
// 指定需要支持的浏览器版本范围
// 'defaults': 使用 browserslist 的默认浏览器范围
// 'not IE 11': 排除对 Internet Explorer 11 的支持
// 'Chrome >= 53': 支持 Chrome 53 及以上版本
// 'Android >= 6': 支持 Android 浏览器 6 及以上版本

polyfills: [
  'es.promise',
  // 为不支持 Promise 的浏览器添加 Promise polyfill
  'es.array.iterator',
  // 为数组迭代器相关功能添加 polyfill，如 entries(), keys(), values() 等方法
  'es.object.assign',
  // 为 Object.assign 方法添加 polyfill，用于对象属性复制
  'es.promise.finally',
  // 为 Promise.prototype.finally 添加 polyfill
  'es.symbol',
  // 为 Symbol 类型添加 polyfill，支持 ES6 Symbol 特性
],
additionalLegacyPolyfills: [
  'core-js/stable',
  // 添加 core-js 稳定版本的所有 polyfills，提供广泛的 ES 标准库支持
  'regenerator-runtime/runtime',
  // 添加 regenerator-runtime，支持 async/await 等生成器功能
],
renderLegacyChunks: true,
// 为旧版浏览器生成兼容性代码块，确保在不支持现代 JavaScript 特性的浏览器中正常运行

renderModernChunks: false,
// 不生成现代浏览器专用的代码块，只生成兼容旧版浏览器的代码
// ... existing code ...

polyfills 和 additionalLegacyPolyfills 之间的区别：
polyfills ：

1. 按需引入：根据 targets 配置和代码实际使用情况自动引入必要的polyfill
2. 只引入目标浏览器(根据targets)不支持的API的polyfill

additionalLegacyPolyfills ：

1. 强制引入：无论目标浏览器是否支持，都会引入这些polyfill
2. 兜底方案：用于那些自动检测可能遗漏的polyfill
3. 完整包引入：通常引入完整的polyfill包

additionalLegacyPolyfills 解释

1. additionalLegacyPolyfills - 这是一个配置项，用于指定需要额外添加的 polyfills
2. 'core-js/stable' - core-js 是一个现代 JavaScript 标准库的 polyfill，提供对最新 JavaScript 特性的兼容支持。/stable 表示只包含稳定的特性
3. 'regenerator-runtime/runtime' - 这是用于支持 JavaScript 的 async/await 和 generator 函数的运行时库

总的来说，代码的作用是在构建旧版浏览器兼容版本时，确保添加必要的 polyfills，使得应用能够在不支持现代 JavaScript 特性的旧浏览器中正常运行。

2. 在package.json中添加依赖

"dependencies": {
    "core-js": "^3.39.0",
    "regenerator-runtime": "0.14.1",
  },

3. 移动端tips排查问题，打开vconsole

在index.html中添加这行代码

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script>
      var vConsole = new VConsole()
</script>