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

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

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

白屏 ------ 一看到白屏基本就先考虑，代码没有兼容低版本的浏览器，有些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 的方式安装到生产依赖。

链接嵌入自研的APP，图片无法上传，初步定位到是请求头相关的参数没有解密

思路分析，先看报错------ 右侧的表达式无法解构

代码已经被混淆了，打开这个文件，报错也不太好看出原因了，那就把混淆关掉
直接暴力点，测试环境不压缩代码了, 将.env.sit 的环境变量NODE_ENV production 切换成development

env 复制代码

NODE_ENV = 'development'

找到报错的行数

报错结合network的请求，可以明确的知道这个右侧的值是null，所以无法解构
由于图片上传是设计器里的组件，当时我思考了三种方案
*
1. 请求头相关的参数设计器是存储在cookie中进行使用的，换成localstorage?
- 1. 本系统存一个同名的cookie，看设计器是否会读取
- 1. 设计器进行解密，解密的时候注意处理明文解密以及报错处理
第一种被pass, 第二种失败，第三种方案成功

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