vite项目低版本浏览器兼容性问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite项目低版本浏览器兼容性问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

Uncaught SynntaxError：Unexpected token ?

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

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

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

猜测谷歌浏览器版本问题，测试了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

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

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博客文章来源地址https://www.toymoban.com/news/detail-483726.html

到了这里，关于vite项目低版本浏览器兼容性问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！