Vite Vue3 Capacitor 旧安卓设备报Unexpected token {错误

报错本质是测试设备内置WebView版本过低，不支持ES2019新增的可选catch绑定语法。
你定位到的catch{}写法是ES2019正式落地的语法特性：该版本之前的JS标准强制要求catch关键字后必须跟括号和错误接收参数，即必须写为catch(err){}，省略参数直接写catch{}的写法从Chrome 66版本才开始原生支持。你测试设备的WebView版本为64.0.3282.137，低于语法支持的最低版本要求，解析到该位置时直接抛出语法错误，导致整个JS资源无法加载执行，这也是新设备无异常、旧设备报错的核心原因。

• 调整Vite构建转译目标
  打开项目根目录的Vite配置文件vite.config.js或vite.config.ts，在构建配置项中指定兼容的目标浏览器版本，让构建工具自动将catch{}这类高版本语法转换为旧版WebView可识别的写法，配置参考如下：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    build: {
      // 指定构建产物兼容Chrome 60版本，覆盖Android 6内置WebView
      target: ['chrome60']
    }
  })
  

  修改完成后重新执行构建命令打包，再安装到旧设备测试即可。
• 强制转译存在兼容问题的第三方依赖
  如果调整构建目标后仍存在同类语法报错，说明项目引入的第三方npm包存在未被转译的高版本语法——Vite默认不会转译node_modules目录下的依赖代码，此时可将对应问题依赖加入预构建包含列表，强制Vite在构建阶段处理其语法兼容：

  export default defineConfig({
    // 其他配置...
    optimizeDeps: {
      include: ['存在兼容问题的依赖包名']
    }
  })
  

• 增加WebView版本校验提示（可选）
  如果应用后续还会用到更多新Web特性，可以在安卓端Capacitor配置中增加WebView版本检测逻辑，当检测到用户设备WebView版本低于最低要求时，弹窗提示用户升级系统WebView，从根源上规避语法兼容问题。

内容的提问来源于stack exchange，提问作者Divanelen SA