技术：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博客