解决前端白屏等报错的思路——本文基于vue-cli 5

场景: 近两月在开发一款智能表单的需求,通过拖拉拽的方式生成JSONschema, 生成一个基本的表单,然后通过推送消息或者链接分享给用户进行收集表单数据,并对收集上来的数据做基本的分析。拖拉拽的设计器以及渲染器采用其他系统部门自研的组件。

问题: 原本的问题只是一些基本前后端交互的问题,当收集的链接嵌入到客户端(飞书或者自研的APP中),问题就来了。

  1. 白屏 ------ 一看到白屏基本就先考虑,代码没有兼容低版本的浏览器,有些ES6的语法,浏览器不识别,
  • 考虑给browserslist 增加IE11 以及Chrome 49
json 复制代码
{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "IE 11",
    "chrome >= 49"
  ]
}
  • 也可以额外装一些babel
js 复制代码
    module.exports = {
      compact: false,
      presets: ['@vue/cli-plugin-babel/preset', '@vue/babel-preset-jsx'],
      plugins: [
        '@babel/plugin-proposal-optional-chaining', // 可选链 ?.
        '@babel/plugin-proposal-nullish-coalescing-operator', // 空值合并 ??
        '@babel/plugin-proposal-logical-assignment-operators', // &&=    ||=
        '@babel/plugin-transform-private-methods',
        '@babel/plugin-proposal-object-rest-spread',
      ],
    }
  • 另外要考虑下,有些私有包,是否在打包的时候没有过babel转译,需要在项目中webpack配置中过一下babel(主要需要看下控制台报了什么错,复现错误可以下载Chrome 49、 Chrom 59 的浏览器进行复现)
js 复制代码
{ 
  transpileDependencies: [/@transsion[/\\].*/, 'screenfull', 'axios'],
}
  • 当以上都解决了,还继续白屏,Chrome49, 59 可能都不报错了,那就去Webpack 配置一个vconsole的插件吧
js 复制代码
 const vConsolePlugin = require('vconsole-webpack-plugin')
 module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new vConsolePlugin({
        filter: [], // 需要过滤的入口文件
        enable: process.env.VUE_APP_ENV === 'sit',
      }),
    ],
  },
 }
 
  • vconsole 安装了,再去手机上看看报错信息,出现了

echarts is not defined, 去找哪里用了echarts,原来是拖拉拽的组件中使用了echarts, 使用的是CDN引入的echarts, 这个CDN在手机上打不开,白屏问题找到了!

组件项目中将echarts External出去了,打包的时候不打包echarts,而是在运行时通过CDN拉取echarts,可以降低代码包的体积,但是没想到手机不兼容这个CDN。解决方案 ------ 取消externals, 将echarts 采用npm install 的方式安装到生产依赖。

  1. 链接嵌入自研的APP,图片无法上传,初步定位到是请求头相关的参数没有解密
  • 思路分析,先看报错------ 右侧的表达式无法解构
  • 代码已经被混淆了,打开这个文件,报错也不太好看出原因了,那就把混淆关掉
  • 直接暴力点,测试环境不压缩代码了, 将.env.sit 的环境变量NODE_ENV production 切换成development
env 复制代码
NODE_ENV = 'development'
  • 找到报错的行数
  • 报错结合network的请求,可以明确的知道这个右侧的值是null,所以无法解构
  • 由于图片上传是设计器里的组件,当时我思考了三种方案
    *
    1. 请求头相关的参数设计器是存储在cookie中进行使用的,换成localstorage?
      1. 本系统存一个同名的cookie,看设计器是否会读取
      1. 设计器进行解密,解密的时候注意处理明文解密以及报错处理
  • 第一种被pass, 第二种失败,第三种方案成功

小结: 处理问题,思路一定要清晰,一步一步定位。

相关推荐
荣达17 分钟前
koa洋葱模型理解
前端·后端·node.js
reembarkation42 分钟前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu1 小时前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|1 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青1 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥1 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb1 小时前
【Python】字符串
java·前端·python
阿笑带你学前端1 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件1 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
万少1 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos