vue3在低版本手机上白屏问题解决(兼容低版本webview)

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,
      }),
    ],
  }
})

// ... 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 ...

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

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