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

今天遇到一个问题,农行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

相关推荐
转转技术团队几秒前
验证码识别实战:前端不写页面,改训模型了?
前端
MomentYY4 分钟前
Temperature:AI 的“脑洞旋钮”
前端·llm·ai编程
远航_25 分钟前
OpenSpec 完整详细介绍
前端·后端
召钱熏35 分钟前
状态枚举正确≠渲染正确:一个语音按钮的状态机边界修复实录
android·前端
SkyWalking中文站37 分钟前
认识 Horizon UI · 1/17:SkyWalking 新一代可观测性控制台
运维·前端·监控
cidy_9837 分钟前
Dify 操作教程:工作流编排 & Chat 对话编排
前端·工作流引擎
tangdou36909865539 分钟前
AI真好玩系列-2分钟快速了解DeepAgents | Quick Guide to DeepAgents in 2 Minutes
前端·javascript·后端
张元清40 分钟前
React useIntersectionObserver Hook:懒加载与可见性检测(2026)
javascript·react.js
小四的小六42 分钟前
AI Agent效果评测实战——搭完Agent才是噩梦的开始
前端
梨子同志1 小时前
JavaScript
前端