Javascript 如何在vue 2.6项目中使用es2020功能？

我有一个Vue 2.6项目，我想在我的项目中使用es2020特性，如可选链接，但我无法在我的项目中使用它。我得到以下错误

> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                           12:59:10

 error  in ./src/components/list/columns/lastUpdate.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (15:20)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       if (!this.data.ObjInst || !this.data.ObjInst.Last_Update) return '';
| 
>       if (this.data?.ObjInst) {
|         console.log("Hello");
|       }

 @ ./src/components/list/columns/lastUpdate.vue?vue&type=script&lang=js& 1:0-349 1:365-368 1:370-716 1:370-716
 .
 .
 .
 .
 .
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.21:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我已经安装了巴贝尔插件，但我得到了相同的错误

npm install --save-dev @babel/plugin-proposal-optional-chaining

我一直在谷歌上搜索，但没有找到任何相关信息

这些是我的项目的依赖项

{
...
“依赖项”：{
“核心js”：“^2.6.11”，
“jwt解码”：“^2.2.0”，
“vue”：“^2.6.12”，
“vue-i18n”：“^8.24.2”，
“vue multiselect”：“^2.1.6”，
“vue2管理lte”：“^0.4.3”，
vue2日期范围选择器“^0.6.1”
},
“依赖性”：{
“@kazupon/vue-i18n-loader”：“^0.3.0”，
“@vue/cli插件巴别塔”：“^3.12.1”，
“@vue/cli插件eslint”：“^3.12.1”，
“@vue/cli服务”：“^3.12.1”，
“babel eslint”：“^10.1.0”，
“eslint”：“^5.16.0”，
“eslint插件vue”：“^5.0.0”，
“vue-cli-plugin-i18n”：“^0.6.1”，
vue模板编译器“^2.6.12”
},
“eslintConfig”：{
“根”：对，
“环境”：{
“节点”：true
},
“扩展”：[
“插件：vue/essential”，
“eslint:建议使用”
],
“规则”：{}，
“解析选项”：{
“解析器”：“babel eslint”
}
}
...
}

---

请帮帮我

我认为你不可能做到这一点，除非你自己去实现它。ES2020的这类可选链接功能在

Vue 3

中提供，但在

Vue 2.x

中不提供

---

据我所知，这是因为Vue项目的标准设置使用Babel/Webpack将代码转换为可以在浏览器中运行的内容（即，Vue模板以呈现函数），并为向后兼容的新功能添加多边形填充。Vue 2使用了Babel 6/Webpack 4，他们在Vue 3中移动到了Babel 7/Webpack 5

---

目前有一个beta版，用于管理Babel/Webpack的升级，但可能需要您重写一些配置。

正如@aweston所提到的，这是因为Webpack

不久前输入的可选链接，Webpack（依赖于它）仅从版本开始支持它。5（在@vue/cli版本5中提供，仍处于测试版）

您可以在webpack版本中使用它。4同样，但要准备好在项目中调整一些巴别塔（这并不难！）

---

您应该在github中进一步阅读您的问题

这不是事实。此问题仅适用于Vue模板，因为它们的编译方式不同于

部分。问题明确列出了不是模板一部分的代码。@ulou非常感谢。我不知道模板是以不同的方式编译的。有趣。@EstusFlask，你是对的，HTML中呈现的代码是有限的，但是OP有一些脚本，所以它是不相关的。安装

@babel/plugin建议可选链接
没有任何帮助，因为这不会影响它是否被使用。见和。我认为默认Vue CLI配置中不会出现问题，因此问题可能特定于您的项目。