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.jsconfigureWebpack: {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.jsmodule.exports = {presets: ['@vue/app'],plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}],'@babel/plugin-proposal-optional-chaining'//在此处配置]}

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

前端小白积累经验篇~~