vue2项目与?.可选链不适配问题？-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2项目与?.可选链不适配问题？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

前端小白积累经验篇~~文章来源地址https://www.toymoban.com/news/detail-514890.html

到了这里，关于vue2项目与?.可选链不适配问题？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！