项目介绍

先来简单介绍一下项目，这是一个基于Vue框架的项目，项目使用的是vue3+ts。这个项目是需要集成在别的APP中的，也就是页面需要在APP中进浏览和操作。这个项目在我接手之前已经开发过一段时间了。项目的依赖都是最新的。

当时开发完成之后，我就开始用自己的iPhone12手机和安卓手机一切都很正常，但是用公司的低版本手机后打开页面之后什么内容也没有。同事的新手机都可以正常打开页面，所以到这里，我确定了这个白屏Bug的出现肯定跟手机的系统有关系 （低版本的手机测试版本iPhoneX 13系统和小米 11.0系统）

于是乎就查询了一下真机调式：

在手机端浏览器使用什么进行调试呢？ Eruda 手机调试面板工具

使用方式： github.com/liriliri/er...

直接在项目上的index.html使用：

js 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
<script>
  eruda.init();
</script>

只在开发环境使用：

js 复制代码

<% if(DEV){ %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/eruda/2.4.1/eruda.min.js"></script>
<script>
  eruda.init();
</script>
<% } %>

问题

在运行项目时，抛出Unexpected token '.' 错误，如图：

浏览器控制台报错我搜索了一下这个错误，猜测是因为项目中有一些es6语法不支持低版本手机，然后就怀疑es6扩展运算符 ...小米和iPhone低版本系统不支持这个这个运算符。后面就把有关于扩展运算符的代码先注释掉看看效果，发现还是白屏。奇怪？难道我写的代码全是错误的，我把这个页面代码全部注释掉用vantUI库里面button按钮看看有没有效果，发现就是出现两个按钮，开心。想到这个问题还是好解决的，就把整个页面一点点测试，看看哪个位置报错，因为手机上没有具体的报错信息和位置

最后发现是封装的接口有问题，必须改成axios写法才可以显示页面，唉！不过也是发现原因所在，不过有一些其他代码逻辑也会报错必须要换一种写法，一遍一遍查找吧

js 复制代码

   axios.post('/managerClient/systemUser/delEngineer', { }, {
      headers: {
        tokenId: token,
      }
    })

最后成功显示出来，打包然后发布到测试环境中。告诉了测试人员测试一下，庆幸能解决问题，心里松了口气。但是测试说低版本手机不能显示，嗯哼！自己开发的时候能正常运行，打包后也没有做什么，我就把真机测试调式工具也弄进去，看看测试环境是报什么错误结果问题又来了，低版本iPhone手机空白页面没有报错？？？😨

最慌的时候，不报错还不显示页面，震惊！就想拿小米手机看看有没有反应，求它显示报错吧😥！

芜湖，安卓手机竟然有报错信息。😂

报错信息

在运行项目时，抛出Unexpected token '？' 错误

庆幸有报错信息，我就又搜索了一下为什么会出现这个问题，从百度搜索的结果来看得到三种猜测：配置babel降为es5看看或者有可能没有对node_modules依赖转换，依赖优化或者报错保留source map，看下是哪个文件抛出的异常定位到目标位置

想着先都试试看吧配置Babel，不过看了这么多还是觉得太麻烦，但是发现了一个官方解决方案：文章链接：解决Vue3.0+Vite项目打包后低版本浏览器兼容性问题 - 掘金 (juejin.cn)

使用@vitejs/plugin-legacy插件

1. 问题分析： 版本较低的浏览器不支持ES6的语法和新API，而Babel默认只转换新的JavaScript句法，不转换新的API，比如Proxy、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法都不会转码

安装插件

css 复制代码

npm i @vitejs/plugin-legacy -D

在vite.config.js中配置

js 复制代码

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
     legacy({
         targets: ['defaults', 'ie >= 11', 'chrome 52'],  //需要兼容的目标列表，可以设置多个
         additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
         renderLegacyChunks:true,
         polyfills:[
            'es.symbol',
            'es.array.filter',
            'es.promise',
            'es.promise.finally',
            'es/map',
            'es/set',
            'es.array.for-each',
            'es.object.define-properties',
            'es.object.define-property',
            'es.object.get-own-property-descriptor',
            'es.object.get-own-property-descriptors',
            'es.object.keys',
            'es.object.to-string',
            'web.dom-collections.for-each',
            'esnext.global-this',
            'esnext.string.match-all'
        ]
     })
  ]
}

试了第一个竟然可以显示了，到此完结撒花，总结一下：出现白屏的原因是因为使用的第三方库的包中使用了es6，然后因为第三方的包默认是没有被处理过的，所以在不支持es6的iPhone系统上就出现了白屏。解决的方式就是通过给vue.config.js的配置文件中plugins配置选项中添加。

报错Unexpected token '.' H5页面在低版本安卓和ISO手机上白屏了，bug修复过程

项目介绍

问题

报错信息

使用@vitejs/plugin-legacy插件