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

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

相关推荐
清寒_8 分钟前
分层理解AI架构,降低对AI复杂度的恐惧
前端·人工智能·ai编程
李白的天不白31 分钟前
如何项目发布到github上
android·vue.js
牧码岛33 分钟前
Web前端之JavaScrip中的Array、Object、Map和Set详解
前端·javascript·web·web前端
Bigger33 分钟前
😮‍💨 有了 AI 之后,我怎么感觉反而更累了?
前端·aigc·ai编程
Dxy123931021634 分钟前
HTML中使用Canvas动态图形渲染:解锁Web交互新维度
前端·html·图形渲染
西陵36 分钟前
如何实现 Claude 生成式 UI?一套可落地的工程方案
前端·人工智能·ai编程
FlyWIHTSKY37 分钟前
Vue 3 + 原生 CSS Float
前端·css·vue.js
energy_DT42 分钟前
2026海上钻井平台可视化运维:红外热成像、超声波、AI视频巡检、数字孪生
前端
ONLYOFFICE43 分钟前
如何将 Word 集成到 Web 应用程序? 5 种方法详解与对比
前端·word·onlyoffice
533_1 小时前
[pinia] vue3中监听pinia值的变化
前端·javascript·vue.js