使 Vite 应用兼容 Chrome 69 (Android 9 WebView)

要让 Vite 构建的现代前端应用在 Chrome 69 (Android 9 内置 WebView 版本) 上正常运行，需要进行一系列兼容性配置。以下是详细解决方案：

核心配置方案

1. 安装必要依赖

npm install @vitejs/plugin-legacy core-js regenerator-runtime

2. 配置 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['chrome >= 69'],
      additionalLegacyPolyfills: [
        'core-js/stable',
        'regenerator-runtime/runtime'
      ],
      modernPolyfills: true
    })
  ],
  build: {
    target: 'es2015', // 关键配置
    cssTarget: 'chrome69', // 针对 Chrome 69 的 CSS 处理
    polyfillModulePreload: true
  },
  optimizeDeps: {
    include: [
      'core-js',
      'regenerator-runtime/runtime'
    ]
  }
})

3. 入口文件添加 polyfill

在 main.js 或项目入口文件最顶部添加：

import 'core-js/stable'
import 'regenerator-runtime/runtime'

针对性优化措施

1. 语法降级处理

// vite.config.js 追加配置
export default defineConfig({
  // ...
  esbuild: {
    target: 'es2015'
  }
})

2. 解决常见兼容问题

空白屏问题

// 在 index.html 中添加兼容性检测
<script>
  if (!window.Promise || !window.WeakMap || !window.URL) {
    document.getElementById('app').innerHTML = `
      <div style="padding: 20px; text-align: center;">
        <h2>不兼容的浏览器</h2>
        <p>您的浏览器版本过旧，请升级到最新版本 Chrome</p>
        <p>或尝试使用 Firefox/Edge 等现代浏览器</p>
      </div>
    `;
  }
</script>

异步加载问题

// 动态导入改为传统方式
// 替换 import('./module') 为：
const module = await new Promise(r => {
  const s = document.createElement('script')
  s.src = '/path/to/module.js'
  s.onload = r
  document.head.appendChild(s)
})

3. 构建目标调整

# package.json 中添加专用构建命令
"scripts": {
  "build:android9": "vite build --target es2015 --minify false"
}

特定问题解决方案

1. Proxy 对象问题

Chrome 69 对 ES6 Proxy 支持不完善，解决方案：

// 在 vue.config.js 中禁用 reactivity transform
export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: false
    })
  ]
})

2. CSS 变量问题

创建兼容性 CSS 文件：

/* fallback.css */
:root {
  --color-primary: #42b983;
}

/* 传统浏览器支持 */
.color-primary {
  color: #42b983 !important;
}

3. 模块系统问题

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        format: 'es', // 使用 ES 模块
        chunkFileNames: '[name]-[hash].js',
        entryFileNames: '[name]-[hash].js',
        manualChunks: undefined // 禁用自动 chunk 分割
      }
    }
  }
})

测试验证方案

本地测试：
```
npm run build:android9
npx serve dist
```
使用 BrowserStack 或 Sauce Labs 测试真实 Android 9 设备

Chrome 开发者工具模拟：

打开 DevTools (F12)
切换至移动设备模式

设置自定义用户代理：

Mozilla/5.0 (Linux; Android 9; Pixel 2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36

备选方案

如果仍遇到兼容性问题，可以考虑：

使用传统构建工具：

npm install -D @vue/cli-service
vue-cli-service build --target lib --name my-app src/main.js

提供简化版页面：

// router.js
const router = createRouter({
  routes: [
    {
      path: '/lite',
      component: () => import('./views/LiteView.vue'),
      meta: { forLegacy: true }
    }
  ]
})

router.beforeEach((to) => {
  if (/Android 9/.test(navigator.userAgent) && !to.meta.forLegacy) {
    return '/lite'
  }
})

服务端渲染降级：

// server.js
app.get('*', (req, res) => {
  const isAndroid9 = req.headers['user-agent'].includes('Android 9')
  isAndroid9 ? renderLegacyApp(req, res) : renderModernApp(req, res)
})

通过以上配置，你的 Vite 应用应该能够在 Chrome 69 (Android 9 WebView) 上正常运行。建议在实现后进行全面测试，特别是验证以下功能：

路由导航
状态管理
异步组件加载
第三方库功能