Vue构建后报错：Unexpected token '?'

Question

在使用 Vue 构建项目时，运行打包后的生产版本偶尔会出现“Unexpected token '?'”错误，通常出现在较老的浏览器（如 IE11 或旧版 Edge）中。该问题根源在于现代 JavaScript 中的可选链操作符（?.）未被正确转译。尽管 Vue CLI 或 Vite 默认支持语法转换，但若未正确配置 Babel 或 TypeScript，或第三方库引入了未转译的 ES 新特性代码，构建产物中仍可能保留“?”符号，导致不兼容浏览器解析失败。解决方法包括：确保 babel-loader 正确配置并启用 @babel/preset-env，检查 node_modules 中的库是否需额外转译，以及在目标浏览器列表（browserslist）中明确包含低版本浏览器，以触发必要语法降级。

Answer 1

一、问题背景与现象分析

在使用 Vue 构建项目时，开发阶段一切正常，但运行打包后的生产版本偶尔会出现“Unexpected token '?'”错误。该错误通常出现在较老的浏览器环境中，如 Internet Explorer 11 或旧版 Microsoft Edge（EdgeHTML 版本）。

此错误的根本原因在于现代 JavaScript 中引入的可选链操作符（?.）未被正确转译为兼容性更强的传统语法。尽管 Vue CLI 和 Vite 等构建工具默认集成了 Babel 或 esbuild 来处理语法降级，但在某些配置缺失或第三方依赖未转译的情况下，ES2020+ 的新特性仍可能直接进入最终构建产物。

二、从浅入深：理解问题的技术层级

1. 表层现象：浏览器控制台报错“Unexpected token '?'”，页面白屏或脚本中断。
2. 语法层面：JavaScript 引擎无法识别 ?. 操作符，因其属于 ES2020 标准，IE 完全不支持。
3. 构建流程：Babel 转译器未对包含 ?. 的代码执行降级转换。
4. 配置根源：browserslist 配置未覆盖低版本浏览器，导致 @babel/preset-env 判断无需转译。
5. 依赖影响：node_modules 中某些库发布的是未经转译的 ES 模块（如 .mjs 文件），跳过 babel-loader 处理。

三、常见技术场景与触发条件

场景	描述	是否常见
Vue CLI + 默认 preset	若未修改 browserslist，默认可能忽略 IE11	高
Vite 项目使用 rollup-plugin-babel	需手动配置转译规则	中
引入 lodash-es 或其他 ES 模块库	这些模块常含现代语法	高
TypeScript 编译目标设为 ESNext	即使 Babel 存在，TS 输出仍可能含新语法	中
CDN 加载第三方 SDK	外部脚本未做兼容处理	低

四、解决方案体系化梳理

解决该问题需要从构建配置、依赖管理、目标环境三个维度协同处理：

1. 配置 Babel 正确启用 @babel/preset-env

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        ie: '11'
      },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: ['@babel/plugin-proposal-optional-chaining']
};
  

2. 显式配置 browserslist 支持老旧浏览器

在 package.json 或 .browserslistrc 中添加：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "ie >= 11"
]
  

3. 对 node_modules 中特定库进行转译（Vue CLI 示例）

// vue.config.js
module.exports = {
  transpileDependencies: [
    'lodash-es',
    'some-es-library',
    /^your-vendor-package/
  ]
};
  

4. Vite 项目中的等效处理策略

Vite 默认使用 esbuild，其不支持可选链降级，需结合 Babel 插件：

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import babel from 'vite-plugin-babel';

export default defineConfig({
  plugins: [
    vue(),
    babel({
      filter: /\.[jt]sx?$/,
      babelConfig: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-proposal-optional-chaining'],
        targets: { ie: '11' }
      }
    })
  ]
});
  

五、诊断流程图：定位“Unexpected token '?'”来源

graph TD
      A[生产环境报错 Unexpected token '?'] --> B{是否仅在 IE/旧Edge 出现?}
      B -- 是 --> C[检查构建产物中是否存在 ?. 语法]
      B -- 否 --> D[排查其他语法错误或 CDN 资源]
      C --> E{来自 src 还是 node_modules?}
      E -- src --> F[确认 babel-loader 是否生效]
      E -- node_modules --> G[查看该库是否提供 UMD/legacy 构建]
      F --> H[检查 babel 配置及 browserslist]
      G --> I[考虑添加 transpileDependencies]
      H --> J[修复配置并重新构建]
      I --> J

六、高级建议与长期维护策略

• 建立多浏览器测试矩阵，集成 Sauce Labs 或 BrowserStack 自动化验证。
• 使用 @babel/preset-env 的 debug 模式输出实际应用的转译规则。
• 对团队内部组件库统一构建标准，确保输出兼容性一致。
• 监控 npm 包的 module 字段指向的文件类型，避免引入裸 ES 模块。
• 在 CI 流程中加入静态扫描步骤，检测构建产物中的非法语法模式。
• 考虑使用 Webpack 的 Rule.exclude 精细化控制转译范围，提升构建性能。
• 对于必须支持 IE 的项目，评估渐进增强或降级体验方案的可行性。
• 记录每次构建的目标环境清单，便于回溯兼容性变更。
• 教育团队成员理解现代 JS 语法与运行时环境之间的映射关系。
• 定期审查 dependencies 版本更新带来的潜在兼容风险。