VueJs出现Unexpected token '?'编译错误，求助解决方法

• 确认transpileDependencies配置的准确性
  确保配置中包含新增依赖的完整包名，而非路径或简写。比如新增依赖为your-new-package，配置应为：

  // app.config.js
  module.exports = {
    transpileDependencies: ['your-new-package']
  };
  

  若依赖是嵌套在其他包下的子依赖，可尝试用正则匹配，比如/your-new-package/。

• 检查Babel配置的兼容性
  在babel.config.js中，确保@babel/preset-env的targets覆盖了需要兼容的环境，或显式启用可选链转译：

  // babel.config.js
  module.exports = {
    presets: [
      ['@vue/cli-plugin-babel/preset', {
        targets: {
          // 根据项目需求设置目标环境，比如支持IE11则需要转译ES2020语法
          ie: '11',
          chrome: '60'
        },
        useBuiltIns: 'usage',
        corejs: 3
      }]
    ],
    // 若preset未自动引入，手动添加插件
    plugins: ['@babel/plugin-proposal-optional-chaining']
  };
  

• 调整Webpack的babel-loader规则（非Vue CLI项目）
  确保babel-loader处理目标依赖包，修改webpack配置：

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          // 排除node_modules但包含目标依赖
          exclude: /node_modules(?!\/your-new-package)/,
          use: 'babel-loader'
        }
      ]
    }
  };
  

• 清理缓存并重新构建
  删除项目的node_modules/.cache、dist目录，执行npm install重新安装依赖，再运行构建命令。

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