vite项目低版本浏览器兼容性问题

技术：vite+vue3.2+ts+element-plus

开发环境没有问题，但是打包后的代码放到正式环境，页面空白...

现场的小伙伴发来报错问题

Uncaught SynntaxError：Unexpected token ?

纳尼，这这这...什么原因，一头雾水

用火狐浏览器访问，没有报错，开始狂摆...时间一点点流逝，全网没有找到解决方法....

猜测谷歌浏览器版本问题，测试了90版本，页面出来了！用户用的浏览器大部分是65和70的，太老了吧

定位到问题就好办了！换关键词搜索“vite低版本浏览器兼容问题”，果然很多人遇到问题

问题分析：

浏览器内核版本太低，导致用浏览器打开，会出现白屏。该语句是ES6的新语法，一般浏览器都没有问题，但低版本的浏览器无法解析该语句，所以要进行js转换，一般的vue2项目我们会使用babel，但vite里不好使用babel，需引入另一个插件，他可以把指定文件转译成目标文件，如ts->js，话不多说，贴代码。

目标文件是vite.config.ts，首先要引入该文件

安装

npm install @vitejs/plugin-legacy -D

npm add -D terser //这个一定得安装，不然打包会报错

必须安装Terser压缩器，因为插件Legacy，使用Terser进行压缩，不压缩，整个包会大2Mb

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

export default {
plugins: [
vue(),
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
}

配置完，重新打包继续测试，内网的70浏览器已经可以打开，可是65还是不行！

考虑让用户直接升级浏览器，好像不现实，只能默默的解决65的问题

本地下载65的浏览器测试起来，果然一个报错 globalThis is not defined

ap.vue 中添加

<script> !(function (t) { function e() { var e = this || self; (e.globalThis = e), delete t.prototype._T_; } "object" != typeof globalThis && (this ? e() : (t.defineProperty(t.prototype, "_T_", { configurable: !0, get: e, }), _T_)); })(Object); </script>

果然完美解决页面空白的问题！！

虽然可以打开页面了，但是同样控制台还是报了一堆的错误

修改了 vite.config.js 的配置

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

export default {
plugins: [
vue(),
legacy({
targets: ['defaults', 'not IE 11'],

  additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
   modernPolyfills: true
   // polyfills: ['es.object.values', 'es.array.flat-map']
 }),

],
}

完美解决，控制台白白净净！！！

参考文章：

vite + vue3 + ts 安装 @vitejs/plugin-legacy 兼容旧版浏览器 - vue3 项目实战vite项目低版本浏览器兼容性问题_vite 兼容性_紫轩阁的博客-CSDN博客