vue2中template里使用可选链操作符( ?. )报错解决方案

最新推荐文章于 2024-09-04 14:53:27 发布
最新推荐文章于 2024-09-04 14:53:27 发布
阅读量1.8k 收藏 4
点赞数 4
分类专栏： Vue2实战 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/138356066
版权

这个问题主要是vue 2.6.x以下的版本， template 不支持可选链操作符，升级vue到2.7.0版本，同时 node 版本升级到 14.0.0即可

  • 检查项目vue版本，找到项目的package.json

在这里插入图片描述

  • 找到node_modules下面的vue依赖包
  • 删除

在这里插入图片描述

  • 安装vue的2.7.0版本，执行命令
npm install vue@2.7.0
  • 重启项目即可
扶苏1002
关注
专栏目录
vue2报错：error The template requires child element
m0_62264065的博客
12-16 587
想在App.vue中展示另一个vue页面，结果没有在想展示的vue文件中的template区域写内容，就出现了这个错误。在template区域加上div标签，在div标签中写内容。(3)运行（npm run serve）后出现的错误。
vue项目使用可选链操作符编译报错问题
学而时习之，不亦说乎。
04-26 5637
vue项目使用可选链操作符编译报错问题 const a = b?.c?.d 报错如下： Support for the experimental syntax ‘optionalChaining’ isn’t currently enabled 解决方案： 需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中 yarn add @babel/plugin-proposal-optional-chaining 在
vue2项目中可选链报错
weixin_45162984的博客
07-19 509
这是需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。注意上面信息，错误来源是 node_modules/@open-wc模块下的文件。这个时候还需要在vue.config.js中添加如下配置,添加所有报错的模块。在babel.config.js中添加如下配置。这个时候还可能会报如下错误。这样就可以正常运行了。
vue2中template里使用可选链操作符( ?. )运行报错
最新发布
Blz624613442的博客
09-04 385
操作符，这是 ECMAScript 提出的一个新特性，用于安全地访问深层嵌套的对象属性。然而，可选链操作符是在 ECMAScript 2020（ES11）中正式引入的。它是 ECMAScript 2020 (ES2020) 中的一个新特性 Vue 2 的模板解析引擎并不支持这个语法。vue2中template里使用可选链操作符()无法运行或者运行报错。升级vue版本到2.7。
vue template 里使用可选链操作符( ?. )报错：Errors compiling template:invalid expression: Unexpected token ‘.‘ i
热门推荐
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-08 1万+
template 不支持可选链操作符，在可以升级 vue 版本的情况下，我们可以升级到。以上的几种版本都是可以的，安装切换完版本，然后运行服务，即可。一定要确定好 vue 版本的问题，可以去依赖里面看看版本，，在 vue template 里使用。大家也可以测试其他的版本，我试了一下。版本，同时 node 版本升级到。在 script 里添加是不报错的。然后通过 nvm 工具切换版本到。我也测试了一下，也是可行的。我使用的node 版本是。这个问题主要是 vue。
vue2.X使用可选链操作符编译报错问题
十一
05-16 902
可选链操作符是ES2020中推出的新语法，允许我们不需要校验当前属性的类型去尝试访问子属性。.c?.dnpm install --save-dev @babel/plugin-proposal-optional-chaining -S //解析可选链语法插件npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator // 双问号语法插件。
vue2中使用可选链（?. ??）操作符报错
weixin_47375788的博客
08-13 805
在ECMAScript 2020 (ES11) 中被引入，用于在尝试访问对象深层属性时避免抛出错误。如果你的Vue项目运行在不支持这些新特性的JavaScript环境中，你会遇到语法错误。在Vue 2中，如果你遇到使用可选链 (Optional Chaining) 操作符?时出现错误，很可能是因为你的项目使用的JavaScript环境不支持这些特性。）操作符，如果是vue2.0的项目则需要安装插件解析：babel-plugin-proposal-optional-chaining。
解决：vue项目构建出现可选链?:操作符解析失败
qq_38969618的博客
06-22 8221
vue中使用可选链操作符构建报错。
Vue2+Vue3（脚手架）
qq_47296476的博客
01-17 1713
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
Vue.js 2.x 官方文档学习记录
qq_44711532的博客
08-20 1216
概念 是用于构建用户界面的渐进式框架。 自底向上逐层应用 只关注视图层 便于与第三方库或既有项目整合 与现代化的工具链以及各种支持类库结合使用 能够为复杂的单页应用提供驱动 特点 响应式数据 指令系统 组件化应用构建 允许使用小型、独立和通常可服用的组件构建大型应用 使用 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 1.引入vue.js文件包 2.body中,设置Vue管理渲染的容器<div id="app">&lt
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
qq_61686552的博客
06-16 877
前端 重点，重点，重点
vue框架使用
qq_45645848的博客
01-11 1266
前端vue基础知识总结，汇总
【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 5542
问题描述 Cannot find module ‘./index.module.less’ or its corresponding type declarations 找不到less后缀名的类型 解决办法 在src目录下创建类型声明文件react-app-env.d.ts，并且声明less类型 内容如下 declare module '*.module.less' { const classes: { readonly [key: string]: string }; export de
ERROR: Invalid assignment target：v-model中使用可选链操作符报错。
youyudehan的博客
08-23 2989
v-model中使用可选链操作符报错：ERROR: Invalid assignment target
vue template 里使用可选链操作符( ?. )报错Unexpected token . in _s(item?.publishInfo?.remark) Raw expres
ZYX10077的博客
09-20 1447
vue template 里使用可选链操作符( ?. )报错
Mac vue3 使用可选链操作符 ?. 及空值合并操作符 ??编译报错
北纬先生
03-25 519
Mac vue3 使用可选链（?.）和 双问号 （??） 使用可选链操作符 ?. 及空值合并操作符 ??编译报错
vue2.6项目中出现可选链错误的问题，运行和构建都报错???
m0_37680500的博客
11-17 1961
boe-h5运行构建报错。
vue可选链操作符报错
07-28
可选链操作符在Vue项目中使用时可能会导致编译报错。这是因为Vue默认不支持可选链操作符。要解决这个问题，你需要安装babel依赖@babel/plugin-proposal-optional-chaining，并在babel.config.js中进行配置。 首先，你需要安装@babel/plugin-proposal-optional-chaining依赖。可以使用以下命令进行安装： ``` npm install --save-dev @babel/plugin-proposal-optional-chaining ``` 然后，在babel.config.js文件中添加以下配置： ```javascript module.exports = { presets: \['@vue/app'\], plugins: \["@babel/plugin-proposal-optional-chaining"\] } ``` 这样配置后，Vue项目就可以正常使用可选链操作符了。如果你还想使用空值合并操作符，可以在plugins中再添加"@babel/plugin-proposal-nullish-coalescing-operator"配置。 请注意，以上配置是基于Vue CLI创建的项目。如果你是手动配置的项目，可能需要进行一些额外的配置。 引用\[1\] \[2\] \[3\] #### 引用[.reference_title] - *1* [解决：vue项目构建出现可选链?:操作符解析失败](https://blog.csdn.net/qq_38969618/article/details/125409546)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue-使用可选链操作符编译报错问题](https://blog.csdn.net/qq_42164957/article/details/127258232)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue项目启动出现可选链?:操作符解析失败](https://blog.csdn.net/michiko98/article/details/130732784)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值