vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)
vue3打包后在低版本浏览器或webview中出现白屏，原因就是因为语法兼容问题。根据vite官方文档描述，build.target默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88 传送，所以需要我们手动兼容低版本。
本篇以vite2、安卓7/ios11为例。
如何兼容ios11
兼容ios11只需要指定语法转译的最低版本即可解决。
// vite.config.js
build: {
target: ['ios11']
}如何兼容安卓7
target 里写'android7'是没有用的，所以我们要先知道当前安卓版本的浏览器或webview的Chrome版本是多少，查看UA头就行，安卓7的对应版本是Chrome 64。
那是不是这么写就完事了呢？
build: {
target: ['ios11', 'Chrome 64']
}一打包一运行，发现依然白屏，这是怎么回事呢？来看看官方描述。
请注意，默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfill。 传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。
意思就是Chrome 64版本不是现代浏览器，vite默认不支持呀！需要我们引入polyfill。
如何使用@vitejs/plugin-legacy
默认是不支持Chrome 64的，也是需要指定最低版本。
// vite.config.js
import legacy from '@vitejs/plugin-legacy'
export default {
plugins: [
legacy({
targets: ['Chrome 64'],
modernPolyfills: true
}),
],
}打包运行，成功！
补充知识：vue打包项目以后白屏和图片加载不出来问题解决方法
vue打包项目以后部署访问白屏。查看控制台是404.这是由于打包的时候没有设置对静态资源路径。原文件是绝对路径，需要改成相对路径。
1.白屏修改config/index.js
2.图片加载不出来，修改build/utils.js
总结
到此这篇关于vue3+vite兼容低版本的白屏问题的文章就介绍到这了,更多相关vue3+vite兼容低版本白屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue+Openlayers自定义轨迹动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-08-08
本文主要介绍了el-table嵌套el-popover处理卡顿的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
这篇文章主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本篇文章主要介绍了利用vueJs实现图片轮播实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了vue.js如何处理数组对象中某个字段是否变为两个字段方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
近期在用vue做一个环保类的项目,要求使用高德地图,下面这篇文章主要给大家介绍了关于Vue接入高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
vue filter 过滤器处理数据的作用,使用位置:mustache插值和v-bind表达式，过滤器用于文本转换,复杂的数据处理则用computed，这篇文章主要介绍了Vue中的过滤器（filter）,需要的朋友可以参考下2022-11-11
正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
很多朋友在token过期时刷新页面，页面长时间未操作，再刷新页面时，第一次弹出“token失效,请重新登录!”提示，针对这个问题该怎么处理呢，下面小编给大家带来原因分析及解决方法，一起看看吧2021-07-07
最新评论