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

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

相关推荐
晚安日记wanna13 分钟前
Vue2 的 defineProperty 差在哪四层追问筛掉九成候选人
前端·vue.js·面试
TiDi17 分钟前
吸顶导航交互实现
前端
kisshyshy20 分钟前
从Props透传到自定义Hook:系统梳理React跨层级通信与逻辑复用
前端·架构·代码规范
yume_sibai23 分钟前
05-Flutter实战项目
前端·flutter
涛涛ing40 分钟前
React 19.3 发布,但真正的赢家是 StyleX:当 AI 成为框架的“第一用户”
前端
zhangminghuan1 小时前
Vue vs React 实战拓展面试题|摒弃基础八股,聚焦业务开发核心难点(2026前端进阶)
前端
IT_陈寒1 小时前
Redis主从切换竟让业务卡了3秒?这个坑我替你踩了
前端·人工智能·后端
天若有情6731 小时前
独立开发复盘:我用 Node.js 做了个在线工具箱
前端·json·工具
xieliyu.2 小时前
前端基础:常见CSS选择器用法
前端·css·笔记·vscode
zttbee2 小时前
前端测试内容
前端