浏览器版本低,使用?.语法导致页面白屏

今天遇到一个问题,农行app嵌套我们的网页,有部分用户手机白屏,浏览版本是 Chrome/69.0.3497.1

页面还有如下的报错:

Uncaught SyntaxError: Unexpected token .

/marketing/js/chunk.359.1768370456951.js

SyntaxError: Unexpected token .

这个报错是Vue 项目编译 / 打包后运行时的语法解析错误,核心特征:浏览器无法识别代码中的某个 . 点语法,报错定位在打包后的 chunk 分包文件(chunk.359.1768370456951.js)里,属于非常典型的 Vue 项目部署 / 打包类语法兼容问题

这个报错的本质是:你的 Vue 项目中写了【ES6 + 的新语法 / 对象语法】,但打包时没有被babel完全转译兼容,浏览器无法识别该语法,导致解析中断并抛出【意外的符号 .】错误

解决方案:

// 原代码(报错语法)

const name = user?.name;

// 替换后(ES5兼容写法)

const name = user && user.name;

也可以使用解析 ES2020 语法的 babel 插件 (但是我没试过)

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

相关推荐
于慨17 小时前
Lambda 表达式、方法引用(Method Reference)语法
java·前端·servlet
石小石Orz17 小时前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
从前慢丶17 小时前
前端交互规范(Web 端)
前端
像我这样帅的人丶你还17 小时前
别再让JS耽误你进步了。
css·vue.js
@yanyu66617 小时前
07-引入element布局及spring boot完善后端
javascript·vue.js·spring boot
CHU72903517 小时前
便捷约玩,沉浸推理:线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing18 小时前
Page-agent MCP结构
前端·人工智能
王霸天18 小时前
💥别再抄网上的Scale缩放代码了!50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
小领航18 小时前
用 Three.js + Vue 3 打造炫酷的 3D 行政地图可视化组件
前端·github
@大迁世界18 小时前
2026年React大洗牌:React Hooks 将迎来重大升级
前端·javascript·react.js·前端框架·ecmascript