Vue3项目iOS Safari报正则字符类范围顺序错误白屏问题

根因定位 #

该报错是典型的第三方依赖正则写法与低版本iOS Safari不兼容导致，Vite生产构建默认会压缩混淆依赖代码、不保留源码行列映射，因此报错不会指向具体文件位置，和业务代码是否手写正则无关。
从给出的依赖列表看，最高概率触发点是 @tailwindcss/line-clamp@0.4.0：该版本内部使用了Safari 15.4以下版本不支持的无序字符类范围正则写法，是社区反馈最多的同场景报错诱因。

排查步骤 #

• 本地执行生产构建预览：运行npm run build && npm run preview，用出现报错的iOS设备访问预览地址，确认报错稳定复现
• 临时卸载@tailwindcss/line-clamp依赖，删除tailwind配置文件中对应的插件引入项，重新构建后访问，确认白屏是否消失

修复方案 #

推荐方案（无业务代码侵入） #

Tailwind CSS 3.3及以上版本已原生内置line-clamp多行截断能力，无需单独引入第三方插件：

1. 执行命令移除冗余依赖：

npm uninstall @tailwindcss/line-clamp

2. 打开项目根目录的tailwind.config.js，删除plugins数组中的require('@tailwindcss/line-clamp')配置项
3. 重新执行构建部署即可，原有业务代码中写的line-clamp-1/line-clamp-2等类名可完全正常生效，无需修改

兼容方案（不升级Tailwind版本时使用） #

如果暂时无法升级Tailwind主版本，将@tailwindcss/line-clamp锁定到无兼容问题的0.3.1版本：

npm install @tailwindcss/line-clamp@0.3.1 --save-exact

安装完成后重新构建部署即可。

其他可能诱因排查 #

如果上述操作后问题仍存在，按优先级排查以下依赖：

• vue3-qrcode-reader@0.0.1：该早期版本的二维码识别逻辑存在低版本Safari不兼容的正则写法，可临时注释该组件的引入代码验证
• Vite构建兼容配置缺失：Vite 2.9.x默认构建目标未覆盖旧版Safari，可在vite.config.js中显式添加兼容目标：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    target: ['es2020', 'safari14']
  }
})

修改配置后清除node_modules/.vite缓存目录，重新构建即可。

内容的提问来源于stack exchange，提问作者user1818410