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版本等。。

前端小白积累经验篇~~