vue2项目与?.可选链不适配问题？

最近迁移代码遇到了一个问题，报错如下：

看到一个??的连接符，赶紧去网上搜了一下，类似于??和?.和..的统称为可选链，具体解释请前往【可选链运算符（?.） - JavaScript | MDN】 

描述：

        我接触的项目是使用vue2编写的，vue2并不支持ES2020，它是基于ES2015（也就是ES6）标准构建的，所以会出现不识别可选链的类似报错问题，但是，开发者可以使用Babel等工具将ES2020代码转换为ES2015代码，然后就可以在vue2项目中使用了。具体解决方法如下：

1）安装Babel相关的依赖：

npm install babel-core babel-loader babel-preset-env --save-dev

2）在webpack配置文件中添加Babel相关的配置：

//vue.config.js


  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: [
                '@babel/plugin-proposal-nullish-coalescing-operator',
                '@babel/plugin-proposal-optional-chaining'
              ]
            }
          }
        }
      ]
    }
  }

//babel.config.js


module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    '@babel/plugin-proposal-optional-chaining'//在此处配置
  ]
}

我是使用这种配置的方式解决的，还有其他方法：例如升级vue2到vue3版本等。。

前端小白积累经验篇~~