调试一个iphonex下生产环境白屏

面临问题

• iphonex等机型，每次发版后，都会白屏，关闭app重新进也没啥用，卸载app重装后就正常了
• 下面是生产环境开启log的报错信息

开启webpack的sourceMap调试

1、路由改会hash模式还是白屏

2、所有的cdn去掉还是白屏

3、定位到是导航守卫

router.beforeEach((to, from, next) => {
  console.log(to, 'to----------------------')
  console.log(window.location.search, 'window.location.search----------------------')
  let queryData = {}
  if (window.location.search) {
    queryData = to.query
  }
  if ((JSON.stringify(queryData) != "{}" && queryData.token) || (JSON.stringify(queryData) != "{}" && queryData.phone && queryData.village_id)) {
    store.commit("SET_LINKPARAMS", queryData)
    if (queryData.usertype == 1) {
      axios.defaults.headers.common['x-phone'] = queryData.phone
      axios.defaults.headers.common['x-userType'] = 1
      console.log(3)
      login(queryData, to, next)
    } else {
      axios.defaults.headers.common['token'] = queryData.token
      store.dispatch("getUserInfo", {}).then(() => {
        console.log(1)
        // next()这里在ios下部分机型会报错
        next()
      })
    }
  } else {
    console.log(2)
    next()
  }
})

定位到只要在导航守卫里打印了to、form、next都会路由跳转报错，搞不定，还是不打印算了

最后发现是缓存问题，我这边打包后的文件每次名字都一样，ios会对h5加载的js文件进行缓存，每次发版后还会读之前的js文件，这边在打包时加上[hash:8]随机数，就能避免这个问题

module.exports = {
  configureWebpack: config => {
	return:{
    	output: { // 输出重构  打包编译后的 文件名称  【模块名称.随机数.js】解决iOS下缓存问题
          filename: `js/[name].[hash:8].js`,
          chunkFilename: `js/[name].[hash:8].js`
        }
    }
  }
}