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

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

前端小白积累经验篇~~

本文链接：https://www.kjpai.cn/news/2024-04-05/154576.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！