解决：vue项目构建出现可选链?:操作符解析失败

已于 2023-01-30 17:44:33 修改
阅读量7.2k 收藏 10
点赞数 1
分类专栏： Vue+admin后台管理系统 文章标签： vue.js 前端 javascript
于 2022-06-22 15:15:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38969618/article/details/125409546
版权

问题背景描述：代码中使用ES2020（ES11）的新语法：可选链操作符?:，本地npm run build:prod构建正常，但是在云效平台构建时，之前都构建正常，突然这次报错了。

解决步骤（2步）：

1. 安装：npm install @babel/plugin-proposal-optional-chaining --save-dev

扩展：空值合并运算符（??：）是：@babel/plugin-proposal-nullish-coalescing-operator

2.在babel.config.js中配置：

module.exports = {

        ......

        plugins: ["@babel/plugin-proposal-optional-chaining"]

}

问题截图：Module parse failed: Unexpected token

参考链接：

​​​​​​vue项目使用可选链操作符编译报错问题_西丽炒粉炒面的博客-CSDN博客_可选链操作符报错

【vue-cli】使用es6的可选链?.操作符报错Module parse failed解决记录_向着光芒的平安的博客-CSDN博客_vue 不支持可选链

qq_38969618
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
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项目部署在Spring Boot出现页面空白问题的解决方案
12-02
网上流行的解决方案是将assetsPublicPath: ‘/’改成’./’，下面说一下这个解决方案的弊端： 通常页面空白的问题出现大多数是由于Spring Boot端配置了server.servlet.context-path，上下文改变了css, js等文件的访问路径，文件无法加载导致index.html显示空白。’/’改成’./’是将绝对路径变为相对路径，可以动态适应Spring Boot端上下文的改变，这是为什么这个解决方案起作用的原因。 Vue项目部署在Spring Boot出现的另一个常见问题是当刷新浏览器的时候出现white label, 也就是404错误，解决的方案基本是把er
vue项目.可选链操作符浏览器报错提示编译失败
qq_44716001的博客
06-16 485
【代码】vue项目.可选链操作符浏览器报错提示编译失败。
Mac vue3 使用可选链操作符 ?. 及空值合并操作符 ??编译报错
最新发布
qq_33415990的博客
03-25 240
Mac vue3 使用可选链（?.）和 双问号 （??） 使用可选链操作符 ?. 及空值合并操作符 ??编译报错
vue2.6项目中出现可选链错误的问题，运行和构建都报错???
m0_37680500的博客
11-17 819
boe-h5运行构建报错。
vue template 里使用可选链操作符( ?. )报错Unexpected token . in _s(item?.publishInfo?.remark) Raw expres
ZYX10077的博客
09-20 1251
vue template 里使用可选链操作符( ?. )报错
在vue项目中使用链判断、null判断运算符报错
zhu_zhu_xia的博客
08-29 1182
中使用es6新的运算符（例如链判断运算符，null判断运算符）会报错，编译不成功。依赖,并添加到babel.config.js中。2.在babel-config.js添加配置。
Error: Cannot find module '@babel/core’
qq_39025670的博客
12-11 3805
最近在安装完：@babel / plugin-proposal-optional-chaining，和@ babel / plugin-proposal-nullish-coalescing-operator时，发现报错Error: Cannot find module '@babel/core’ 主要原因是：babel-loader和babel-core版本不对应 babel-loa...
vue项目使用可选链操作符编译报错问题
roylinziyang的博客
03-04 1万+
可选链操作符是ES2020中推出的新语法，允许我们不需要校验当前属性的类型去尝试访问子属性。 const a = b?.c?.d 在vue项目中使用可选链操作符语法时会出现编译报错的情况，需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。 安装 npm install @babel/plugin-proposal-optional-chaining --save-dev 安装过程中可能会出现"源文本中出现
Cesium 运行时报错 Module parse failed: Unexpected token 解决办法
顺芯技术猿的博客
05-09 6619
【代码】Cesium 运行时报错 Module parse failed: Unexpected token 解决办法。
项目无法识别 ?. 语法，导致报错Module parse failed: Unexpected token
热门推荐
weixin_45717984的博客
05-27 4万+
首先找到报这个问题的地方 我这里是因为es语法问题 如果你也是npm安装了一个包，然后在导入的时候报这个语法错，那你可以接着往下看，如果不是就不用往下看了 问题原因： 因为导入的组件库是直接上源码的，必须告知webpack，需要编译一下这个库，让源码中的es6、es7的特性转换为es5 解决方案： 1.在vue.config.js 里面加上 transpileDependencies: [‘/@yabby-business/’] 2.还有一种方式在babel.config.js中指定库导入的时候用的编
VUE项目启动失败：Module build failed
01-08
VUE项目启动至98%时失败 错误如图，最近使用Vue/cli创建一个项目时npm run serve启动失败，询问了大佬，都说重新安装一下node_modules包，卸载重新安装之后任然无效，最后发现是命令错误 首先第一步rimraf node_modules命令移出node_modules包 然后再使用npm i install命令安装一次node_modules包 到这里应该已经没有问题了，可以尝试一下能否启动成功 如果依然无法启动可以使用npm audit fix命令修复一下node_modules包，最后在调试一次，代码完美运行 作者：安市
Vue 项目构建与开发入门.rar
06-18
『课程介绍』: 你会学到什么 基于 Vue CLI 3.x 项目构建的基础知识 常用的前端包管理工具及命令相关知识 使用脚手架构建的参数配置与注意事项 webpack 在 Vue CLI 3.x 中的应用方式 单页及多页应用的构建方法 Vue 项目开发技巧和代码优化相关知识 Vue API 中实用但容易忽略的属性和方法 实用的 Vue 项目开发工具、第三方库及接口知识 可以试一下这一款markdown编辑器: https://www.typora.io/ 『课程目录』: 开篇：Vue CLI 3 项目构建基础.md 开发拓展篇 1：扩充你的开发工具.md 开发拓展篇 2：将 UI 界面交给第三方库.md 开发拓展篇 3：尝试使用外部数据.md 开发指南篇 1：从编码技巧与规范开始.md 开发指南篇 2：学会编写可复用性模块.md 开发指南篇 3：合理划分容器组件与展示组件.md 开发指南篇 4：数据驱动与拼图游戏.md 开发指南篇 5：Vue API 盲点解析.md 构建基础篇 1：你需要了解的包管理工具与配置项.md 构建基础篇 2：webpack 在 CLI 3 中的应用.md 构建基础篇 3：env 文件与环境设置.md 构建实战篇 1：单页应用的基本配置.md 构建实战篇 2：使用 pages 构建多页应用.md 构建实战篇 3：多页路由与模板解析.md 构建实战篇 4：项目整合与优化.md 总结篇：写在最后.md
Vue cli构建及项目打包以及出现的问题解决
10-18
主要介绍了Vue cli构建及项目打包以及出现的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Cant find variable: SockJS vue项目的问题
01-21
用的vue-cli(webpack-simple模板)，在开发环境运行（npm run dev），一直都没有问题，突然在ios的safari中调试，出现报错： Can’t find variable: SockJS 这是为什么呢？ 原来这是webpack(我的版本：3.6.0)的报错...
query-builder:Vue查询构建器
04-11
查询生成器 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
解决报错: PostCSS received undefined instead of CSS string
qq_38969618的博客
02-25 3万+
解决方案1：可能本地有多个nodeJS版本（本地使用了nvm），之前切到另一个版本编译node-sass后，再切换到另外一个nodeJS版本，导致的问题。注意：node-sass是一个绑定libsass（sass的一种版本）的nodeJS库。 具体解决方法：重新编译下node-sass即可。 npm rebuild node-sass 解决方案2: 因本地使用nvm管理node, 且当前使用的node版本为低版本v12导致。 复现环境： node: v12.22.0 "sass-loade.
eslint报错：“Identifier xxx is not in camel case“
qq_38969618的博客
06-26 9204
在.eslintrc.js文件中：将校验驼峰命名的规则关闭即可（camelcase: 'off'）。 // eslintrc.js module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard', '@vue/typescript/recommended' ], parserOptions: { e
解决：使用sortablejs库对el-table设置拖拽，但拖拽一直不生效。
qq_38969618的博客
04-12 7351
问题原因：我安装错了库名！！！我直接在npm上搜，看到第一个显示的sortable.js，就直接错误安装npm install --save sortable.js，导致在我的vue+ts项目某个el-dialog页面使用时，拖拽一直不起作用。实际正确的应该是：sortablejs, 正确的库名是没有小数点分隔。 正确使用如下： 第一步：先安装插件 npm install sortablejs --save 第二步：在页面中引入插件&使用即可。 // demo.vue <tem
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 ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值