正则表达式导致部署在Firebase的Vue网站移动端显示白屏如何解决？

根因定位 #

你出现移动端白屏的核心原因是正则表达式使用了ES2018才新增的正向后行断言（(?<=xxx)语法），该特性兼容性极差：iOS 11.3及以下全版本不支持，低版本安卓内置浏览器、部分老旧移动端WebView也不支持，代码运行到对应正则时会直接抛出语法错误，导致Vue组件渲染中断，最终出现白屏。
你两个对象re和rules中都包含了带后行断言的正则：re.id、re.urlTimestamp、rules.url的两条校验规则都用到了后行断言，所以只删除任意一个对象，剩下的对象里依然存在有兼容问题的正则，只有两个都删才能正常运行。

修复方案 #

1. 替换所有含后行断言的正则 #

将所有用到(?<=)的正则改写为不依赖后行断言的版本，通过分组提取需要的内容：

// 原取视频ID的正则：/(?<=\?v=)\w*(?=[^#&\?]*)/
// 改写后，匹配后取match[1]即可获得视频ID
const youtubeIdReg = /\?v=(\w*)[^#&\?]*/

// 原提取时间戳的正则：/(?<=\&t=)((?:[0-9]{1,2})h)?((?:[0-9]{1,3})m)?((?:[0-9]{1,5})s)?/g
// 改写后，匹配后取match[1]即可获得时间戳内容
const urlTimestampReg = /&t=((?:[0-9]{1,2})h)?((?:[0-9]{1,3})m)?((?:[0-9]{1,5})s)?/g

对应rules里的校验规则同步改写即可，不需要用到后行断言就能实现完全相同的逻辑。

2. 优化正则和校验规则的存储位置 #

Vue的data会对所有属性做响应式递归劫持，正则、校验函数这类常量不需要做响应式处理，你可以直接把它们提到组件script的顶层，或者用Object.freeze()包裹后再放到data中，避免不必要的响应式劫持，也能减少低版本浏览器的兼容风险：

// 顶层声明常量
const RE = Object.freeze({
  youtube: /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=|\?v=)([^#&\?]*)/,
  id: /\?v=(\w*)[^#&\?]*/,
  // 其他正则
})
const RULES = Object.freeze({
  name: [
    v => !!v || 'Required'
  ],
  // 其他校验规则
})

export default {
  data() {
    return {
      // 仅存放业务响应式数据，不存放常量正则和规则
    }
  }
}

3. 补充全局错误捕获 #

可以在Vue入口添加全局错误处理逻辑，后续出现运行时错误可以及时捕获定位，避免直接白屏：

Vue.config.errorHandler = (err, vm, info) => {
  // 此处可以添加错误上报、控制台打印逻辑
  console.error('Vue运行错误：', err, info)
}

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