Vue2+Electron项目升级Vue3后遇Vuetify编译错误求助

错误原因 #

报错指向的?.（可选链）和??（空值合并运算符）是ES2020+语法，你的Webpack/Babel配置未对node_modules/vuetify目录下的文件进行转译，导致无法识别这些语法。

解决方案 #

1. 调整Babel配置，让其处理Vuetify文件 #

修改项目根目录的babel.config.js（或.babelrc），添加对Vuetify的包含规则：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset' // 保留你原有的preset
  ],
  include: [
    /node_modules\/vuetify/
  ]
}

2. 配置Webpack让Babel-loader处理Vuetify的.mjs文件 #

如果是自定义Webpack配置（比如vue.config.js或webpack.config.js），修改规则让Babel转译Vuetify：

// vue.config.js示例
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /node_modules(?!\/vuetify)/, // 排除node_modules但Vuetify除外
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    }
  }
}

3. 确保Babel支持ES2020语法 #

如果你的Babel preset未包含ES2020支持，安装对应插件：

npm install @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator --save-dev

然后在Babel配置中添加插件：

module.exports = {
  // ...其他配置
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ]
}

4. 清理缓存并重新构建 #

rm -rf node_modules package-lock.json
npm install
npm run build

内容的提问来源于stack exchange，提问作者Balamurugan A.