我有一个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
我已经安装了babel插件，但我也遇到了同样的错误。
npm install --save-dev @babel/plugin-proposal-optional-chaining
我一直在谷歌上搜索，但没有找到任何关于它的信息。
这些是我项目的依赖项
{
...
"dependencies": {
"core-js": "^2.6.11",
"jwt-decode": "^2.2.0",
"vue": "^2.6.12",
"vue-i18n": "^8.24.2",
"vue-multiselect": "^2.1.6",
"vue2-admin-lte": "^0.4.3",
"vue2-daterange-picker": "^0.6.1"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
"@vue/cli-plugin-babel": "^3.12.1",
"@vue/cli-plugin-eslint": "^3.12.1",
"@vue/cli-service": "^3.12.1",
"babel-eslint": "^10.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-cli-plugin-i18n": "^0.6.1",
"vue-template-compiler": "^2.6.12"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
}
...
}
求你了，帮帮我！
我不认为你能做到这一点，除非你自己实现它。ES2020具有这样的可选链接功能，在Vue 3中可用，但在Vue 2.x中不可用。
更多信息可以在这里找到
更新日期：2023年7月20日
来自下面的评论(@DMack(：
对于任何在2.7之后发现这个问题的人来说，现在这应该不是问题。从2.7发布说明来看：[Vue 2.7]支持在模板表达式中使用ESNext语法。当使用构建系统时，编译后的模板渲染函数将通过为普通JavaScript配置的相同加载程序/插件。这意味着，如果您已经为.js文件配置了Babel，它也将应用于SFC模板中的表达式。
据我所知，这是因为Vue项目的标准设置使用Babel/Webpack将代码转换为可以在浏览器中运行的东西(即Vue模板来渲染函数(，并为新功能添加polyfill以实现向后兼容性。Vue 2使用Babel 6/Webpack 4，他们在Vue 3中使用了Babel 7/Webpack 5。
@vue/cli目前有一个测试版，可以管理Babel/Webpack的升级，但它可能需要重写一些配置。
正如@aweston所提到的，这是因为Webpack。
不久前，Acorn进入了可选链接，Webpack(取决于它(仅从第5版开始支持它(在@vue/cli第5版中可用，仍处于测试版(。
你也可以在webpack版本4中使用它，但要准备好在你的项目中调整一些babel(这并不难！(
你应该在github中进一步阅读这个问题，准确地分配你的问题
@Loop，在vue.config.js文件中添加以下webpack对象(chainedWebpack(：
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.test(/.vue$/)
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// modify the options...
return options
})
.end()
.use('vue-style-loader')
.loader('vue-style-loader')
.end()
}
}
如果它对你有用，一定要告诉我。