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

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

相关推荐
半个开心果2 小时前
vue3项目结构里的hooks 和utils
前端·javascript·vue.js
Wzx1980122 小时前
自研开发的前后端项目部署流程
vue.js·python
lili-felicity2 小时前
React Native for OpenHarmony 实战:图片懒加载(LazyLoading) 详解
javascript·react native·harmonyos
鹏程十八少2 小时前
3. Android 腾讯开源的 Shadow,凭什么成为插件化“终极方案”?
android·前端·面试
VT.馒头2 小时前
【力扣】2627. 函数防抖
前端·javascript·算法·leetcode
IT_陈寒2 小时前
Vite 4.0实战:5个被低估的配置项让构建速度提升50%
前端·人工智能·后端
摘星编程2 小时前
React Native for OpenHarmony 实战:LayoutAnimation 布局动画详解
javascript·react native·react.js
消失的旧时光-19432 小时前
数据驱动 vs 流程驱动:前端与 Flutter 的两种架构主线
前端·数据驱动·流程驱动·架构思想
2501_918126912 小时前
国标麻将一抽胡
前端·学习·html·个人开发