vue项目换环境以后无法启动_修复支持可选链操作符?_invalid expression: Unexpected token ? in---vue工作笔记0029

最新推荐文章于 2025-06-07 12:51:23 发布
最新推荐文章于 2025-06-07 12:51:23 发布
阅读量470 收藏
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 前端UI&后端&分布式 文章标签： vue项目报错 可选链操作符 vue项目可选链操作符 vue项目node版本 vue项目vue版本
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.youkuaiyun.com/lidew521/article/details/147118128

 先说一下这个问题原因是,本地安装的node.js版本太低了,应该保持在14.0以上

vue我们可以升级到 2.7.0 版本，同时 node 版本升级到 14.0.0。

 ERROR  Failed to compile with 6 errors                                                              2:16:03 PM

 error  in ./src/views/system/rawData/views.vue?vue&type=template&id=394f6ccb

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

  Errors compiling template:

  duplicate attribute: :total

  117|                            stripe
  118|                    -                 :total="obj?.total"
  119|                    +                 :total="obj && obj.total"
     |                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
了解本专栏 订阅专栏 解锁全文 超级会员免费看
微信小程序：解决报错SyntaxError: Invalid or unexpected token，SyntaxError:无效或意外的令牌（微信小程序调试编译/打包发布报错，页面白屏无法运行问题）
高级前端工程师
06-21 3568
微信小程序报错：SyntaxError: Invalid or unexpected token（已解决）捕获的查询无效或意外的标记，更新完小程序得代码后，某些页面就进不去了，控制台报错，小程序编译项目时报 SyntaxError: Invalid or unexpected token，突然就不行了报错，小程序编译报错，页面白屏报错，无效或意外的标记，提示错误，更新后报错，页面白屏或者启动了开发者工具但是不编译项目，数据格式错误，代码里的符号错了，多了、少了或是半角与全角的问题，标签没有闭合，使用了中文字
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。
出现这个错误vue.js:634 [Vue warn]: Error compiling template: invalid expression: Unexpected token的解决办法
weixin_45372418的博客
11-13 1万+
今天遇到 如图的问题， 错误代码 直接上解决办法 出现这个错误的情况我遇到这几个vue.js:634 [Vue warn]: Error compiling template 1、在绑定多个class是中间用‘“；”分隔 ，应该用“，” 2、为class动态绑定对象，所以要用{}，千万不要用 [ ],这是绑定数组时用的 ...
java.lang.Error: Unresolved compilation problems:解决方案
热门推荐
huangbaokang的博客
07-18 9万+
出现该问题的原因主要是编译等级跟jdk不一致。 先查看你jdk版本 我这里是1.7,设置下Java compiler 和 Project Facets，问题解决！！
[Vue warn]: Error compiling template:invalid expression: Unexpected token ‘{‘ in
asdf1239900的博客
09-14 1933
vue中模板字符串的语法使用错误记录
Errors compiling template: invalid expression: Unexpected token '.' in " "+_s(currentTab?.name)+" " Raw expression: {{ currentTab?.name }}
06-05
然而，如果项目使用的 Babel 配置未包含对可选链操作符的支持插件（如 `@babel/plugin-proposal-optional-chaining`），则会导致编译器无法识别 `?.` 语法，从而抛出类似 `invalid expression` 的错误[^1]。 #### ...
invalid expression: Unexpected token '.' in
04-01
回到用户的问题，错误信息是“invalid expression unexpected token '.'”，可能是在编写某种表达式时，点操作符的位置不正确。例如，在JavaScript中，可能是在对象解构时错误使用点： ```javascript const { obj....
使用node 12版本运行项目报错 Compiled with problems:X ERROR in ./src/views/home/partyBuildingStore.vue?vue&type=template&id=b6dac866&scoped=true (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/home/partyBuildingStore.vue?vue&type=template&id=b6dac866&scoped=true) Module Error (from ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: invalid expression: Unexpected token '.' in
最新发布
09-24
说明你的 Vue 模板中使用了 **JavaScript 表达式语法错误**，特别是在模板（`<template>`）里用了 **可选链操作符 `?.`** 或 **空值合并 `??`** 等 **Node.js 12 不支持或 Babel 未正确转译的语法**。 --- ## 错误...
vscode可选链表达式npm run dev 启动报错 ERROR Failed to compile with 5 errors 16:33:53 error in ./src/views/rule/index.vue?vue&type=template&id=8942b3ce&scoped=true Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: invalid expression: Unexpected token '.' in !item.ocrContent?.includes('<em>') Raw expression: v-if="!item.ocrContent?.includes('<em>')" 116| <div v-html="item.name"></div> 117| </div> 118| <div style="width: 1600px;" class="ocrContent" v-if="!item.ocrContent?.includes('<em>')"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 119| 摘要：<span 120| v-html="item.ocrContent?.length > 160 ?item.ocrContent.substring(0,260) + '...': item.ocrContent"></span> invalid expression: Unexpected token '.' in item.ocrContent?.length > 160 ?item.ocrContent.substring(0,260) + '...': item.ocrContent Raw expression: v-html="item.ocrContent?.length > 160 ?item.ocrContent.substring(0,260) + '...': item.ocrContent" 117| </div> 118| <div style="width: 1600px;" class="ocrContent" v-if="!item.ocrContent?.includes('<em>')"> 119| 摘要：<span | 120| v-html="item.ocrContent?.length > 160 ?item.ocrContent.substring(0,260) + '...': item.ocrContent"></span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 121| </div> invalid expression: Unexpected token '.' in libraryData.filter(x => x.id == item.status)[0]?.name Raw expression: v-html="libraryData.filter(x => x.id == item.status)[0]?.name" 138| </span> 139| <span style="width: 200px;"> 140| 法规库：<span v-html="libraryData.filter(x => x.id == item.status)[0]?.name"></span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 141| </span> 142| <span style="width: 150px;"> invalid expression: Unexpected token '.' in levelData.filter(x => x.id == item.level)[0]?.name Raw expression: v-html="levelData.filter(x => x.id == item.level)[0]?.name" 141| </span> 142| <span style="width: 150px;"> 143| 层级：<span v-html="levelData.filter(x => x.id == item.level)[0]?.name"></span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 144| </span> 145| <span style="width: 270px;"> @ ./src/views/rule/index.vue?vue&type=template&id=8942b3ce&scoped=true 1:0-527 1:0-527 @ ./src/views/rule/index.vue @ ./src lazy ^\.\/.*\.vue$ namespace object @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://172.16.0.172:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js error in ./src/views/index/pageNew.vue?vue&type=template&id=2038c2aa&scoped=true Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: invalid expression: Unexpected token '.' in !item.ocrContent?.includes('<em>') Raw expression: v-if="!item.ocrContent?.includes('<em>')" 72 | <div style="font-style: italic;font-weight: bold;" v-html="item.name"></div> 73 | </div> 74 | <div style="width: 1090px;" class="ocrContent" v-if="!item.ocrContent?.includes('<em>')"> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 75 | 摘要：<span 76 | v-html="item.ocrContent?.length > 160 ?item.ocrContent.substring(0,160) + '...': item.ocrContent"></span> invalid expression: Unexpected token '.' in item.ocrContent?.length > 160 ?item.ocrContent.substring(0,160) + '...': item.ocrContent Raw expression: v-html="item.ocrContent?.length > 160 ?item.ocrContent.substring(0,160) + '...': item.ocrContent" 73 | </div> 74 | <div style="width: 1090px;" class="ocrContent" v-if="!item.ocrContent?.includes('<em>')"> 75 | 摘要：<span | 76 | v-html="item.ocrContent?.length > 160 ?item.ocrContent.substring(0,160) + '...': item.ocrContent"></span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 77 | </div> invalid expression: Unexpected token '.' in libraryData.filter(x => x.id == item.status)[0]?.name Raw expression: v-html="libraryData.filter(x => x.id == item.status)[0]?.name" 94 | </span> 95 | <span style="width: 200px;"> 96 | 法规库：<span v-html="libraryData.filter(x => x.id == item.status)[0]?.name"></span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 97 | </span> 98 | <span style="width: 150px;"> invalid expression: Unexpected token '.' in levelData.filter(x => x.id == item.level)[0]?.name Raw expression: v-html="levelData.filter(x => x.id == item.level)[0]?.name" 97 | </span> 98 | <span style="width: 150px;"> 99 | 层级：<span v-html="levelData.filter(x => x.id == item.level)[0]?.name"></span> | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 100| </span> 101| <span style="width: 270px;"> @ ./src/views/index/pageNew.vue?vue&type=template&id=2038c2aa&scoped=true 1:0-529 1:0-529 @ ./src/views/index/pageNew.vue @ ./src lazy ^\.\/.*\.vue$ namespace object @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://172.16.0.172:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js报错
08-20
.`）时遇到编译错误（如 `invalid expression: Unexpected token '.'`），通常是因为Vue的模板编译器不支持ES2020语法（如可选链）。这主要发生在Vue 2.x版本中。下面我将逐步解释原因并提供可靠解决方案，确保您的...
踩坑:Element-UI中el-card里的:body-style
peijian0317的博客
10-29 3621
4.得出结论display:flex必须写在element-ui所规定的body-style里而且body-style前要加:因为里面如果不加的话他就不是js解析式里面的东西会被当成字符串看待,只有加上:里面才会被当成js解析式。初学Vue练习写项目时发现有些css样式只能放body-style里,这是由于 CSS 的特殊性和优先级规则导致的。1.body-style的默认样式是自带padding:20px,常用于el-card中。2.我想实现如图红色框的左右布局最好的方法就是用display:flex。
vue js报错Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value
xiaoxiao66668的博客
02-18 3万+
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors compiling template: Component template should contain exactly one root element. If you are using v-if on multiple elements,
HBuilder编译uniapp 报错Module Error ：Errors compiling template:（最终根本原因）
m0_73034508的博客
09-06 2861
uni-app报错Module Error ：Errors compiling template： 注意：（在uniapp中必须有一个view,且只能有一个根view;所有内容写在这个view下面）
vue2项目使用?.语法报错如何解决？（@babel/plugin-proposal-optional-chaining）
范德萨的博客
07-18 6107
下载插件（@babel/plugin-proposal-optional-chaining）。来代替（如下图所示），但是为了团队协作避免麻烦使用。)babel插件来解决问题。带来的问题，可以使用这个(添加如下代码来拓展解析器。因为有些浏览器版本不兼容。
vue 的老项目启动不了
weixin_42686022的博客
03-27 317
2 时间久远的vue项目起不来，删除了原有package.lock.json 后再次安装node_modules，然后可以跑起来了。1 Node 包安装完后项目跑不起来，原因缺乏npm依赖包，安装外层目录node_modules后解决。某些vue项目由于年代久远安装node_modules之后 npm run dev 无法启动报错。
解决 SyntaxError: Unexpected token ‘.‘ 报错问题
samll_redhat的博客
05-07 8428
解决 SyntaxError: Unexpected token '.' 报错问题
vue项目出现Uncaught SyntaxError: Unexpected token 解决方案
Eric__Zhang的博客
09-28 4485
vue项目出现Uncaught SyntaxError: Unexpected token 解决方案 最近在做vue项目时，需要引入一个第三方的js文件，在index.html中通过以下方式引入JS文件编译后，就报了这个问题。 根据广大的网页的思路，导致这一现象的原因可能有以下几种： 原因一.引用文件的位置不正确 js文件放在static文件夹下和放在assets文件夹下的引用方式是不一样的。简而言之： 1.assets用来放置样式、静态图片，只要src下面的组件中用到的资源就放在assets中。 2.st
Vue2 模板中使用可选链操作符（?.）的坑
weixin_43334866的博客
06-07 1658
Vue2项目中使用可选链操作符(?. )在模板中报错的问题总结：由于Vue2模板编译器(vue-template-compiler)仅支持到ES2015规范，无法解析ES2020的可选链语法。解决方案包括：1)使用计算属性封装逻辑；2)在方法中处理；3)创建工具函数；4)使用三元运算符。建议将复杂逻辑移出模板，保持模板简洁。该问题反映了JavaScript特性与模板编译器的兼容性差异，体现了排查技术问题的方法论：验证假设、查阅文档、善用社区资源。最终强调，编程的核心在于培养解决问题的能力而非单纯记忆语法。
vue2中使用可选链（?. ??）操作符报错
weixin_47375788的博客
08-13 2733
在ECMAScript 2020 (ES11) 中被引入，用于在尝试访问对象深层属性时避免抛出错误。如果你的Vue项目运行在不支持这些新特性的JavaScript环境中，你会遇到语法错误。在Vue 2中，如果你遇到使用可选链 (Optional Chaining) 操作符?时出现错误，很可能是因为你的项目使用的JavaScript环境不支持这些特性。）操作符，如果是vue2.0的项目则需要安装插件解析：babel-plugin-proposal-optional-chaining。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添柴程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值