script和template里可选链运算符?.报错Syntax Error: Unexpected token (64:2)

前情：babel-core@6.2.3,  vue@2.7.14

试过的方法：1、安装@babel/plugin-proposal-optional-chaining，设置.babelrc文件如下，报babel-core版本需7.0.0-0的错。

 

 2、将babel-core单独升到7.0.0-bridge.0（npm i babel-core@7.0.0-bridge.0），报错Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions。

3、将babel整体升级到7：使用npx babel-upgrade --write  （先删除node_moubel和package-lock，不然升级不完整）。

升级成功后，还是会一开始的报错，这时需要.babelrc文件中，添加如下设置，这样可正确解析扩展运算符和可选链运算符。

"presets": [

    "@babel/preset-env"

  ],

如下：

package.json变化：

 以上的方法可以解决在script区域可选链式运算符报错的问题，template的不能解决。

研究发现是可选链式运算符是2020年新出的语法，vue2的template编译器vue-template-compiler还不支持这一功能，vue3应该支持了。但我发现使用vue2的脚手架的项目，template可编译成功。其项目配置如下：

 

 网上的解决办法：(3条消息) vue template 里使用可选链操作符( ?. )报错：Errors compiling template:invalid expression: Unexpected token ‘.‘ i_凯小默的博客-CSDN博客_可选链操作符报错

也可用短路运算： obj && obj.aa

 断断续续用时一天多才解决script的报错问题，因为不信邪走了三次重复的错。事实证明路走不通时，不要怀疑自己走错了，再重走。而是不撞南墙不回头，遇到墙要去不同角度的撞（提取关键词，换各种组合搜索）！