vue3+vite如何兼容低版本的白屏问题(安卓7/ios11)

原创已于 2023-11-15 18:58:17 修改 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-11-15 14:13:46 首次发布

本文介绍了如何在使用Vite构建的项目中安装并配置`@vitejs/plugin-legacy`插件，以确保向Chrome64及更低版本提供兼容性，同时启用现代polyfills。

1.安装legacy

npm install @vitejs/plugin-legacy --save-dev

2.在vite.config.js

import legacy from '@vitejs/plugin-legacy' //引入

export default {
  plugins: [
    //加入这个
    legacy({
      targets: ['Chrome 64'],
      modernPolyfills: true
    }),

  ],
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lipenghao111

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ios + vue3 Teleport + inset 兼容性问题

qq_40147756的博客

11-16

896

ios + vue3 Teleport + inset 兼容性问题

vite前端项目解决在低版本安卓浏览器白屏问题（华为M5、M6设备）

zhanggaungpian的博客

10-18

896

问题描述：vite4.0构建前端项目嵌入到安卓app壳子中通过iframe方式打开前端页面一直白屏，js报错global-this undefined。// 增加项目构建时间戳标识自行百度 vite-plugin-html。target: 'es2015' // 兼容性配置注意1。解决方案：修改legacy配置及构建时target兼容。// 去除debugger。// 浏览器兼容，兼容性配置注意2。// 小图转base64。

1 条评论您还未登录，请先登录后发表或查看评论

Vue 3 + Vite 4 移动端低版本白屏处理

码飞_CC的博客

12-18

2187

vue3打包后在低版本浏览器或webview中出现白屏，原因就是因为语法兼容问题。根据vite官方文档描述，默认支持 Chrome >=87、Firefox >=78、Safari >=14、Edge >=88。，所以需要我们手动兼容低版本。

详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决

12-09

最近遇到一个问题，用 Vue 开发的项目在最近两年新出的安卓手机上没问题，在三四年前的旧手机上出现白屏问题。分析一下应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。 低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。但在手机上调试不方便，受一篇文章的启发， IE 浏览器也是同样的问题，所以可以在 IE 上调试，一个调好了两个就都好了。突然发现万恶的 IE 还是有点用的… 网上的文章大部分是 Vue-cli 2.x 版本的解决方案，但 Vue-cli 3 跟之前的版本还是有很大差异的，可能是我比较菜，看了 n 篇文

vue3+vite 移动端低版本白屏

Coder_Arley的博客

01-25

3202

但我遇到的实际情况是开发环境无效，打包后部署到生产环境有效。总的来说是解决了生产问题。今天遇到一个问题，使用vue3+vite构建的项目，在安卓9的手机上白屏。修改 vite.config.ts。这么修改后，理论上就生效了。

vue3+vite 在ios13会出现白屏问题

weixin_45152159的博客

04-18

1088

1.首先安装所需要的依赖，Vite v3 开始，terser就变成了一个可选的依赖项，需要自己手动安装。3.在vite.config.js添加 esbuild、build 的配置。2.然后新建一个 .babelrc 的文件。

【安卓 IOS白屏问题】vite+js+vue3

youknow156的博客

09-06

990

其实就是在升级过程中会有一些问题微信浏览会有一些缓存，导致用户断言失败无法就失败了一半跟清空缓存或者重新登录就能解决这个问题这肯定不是我们想要的这里再贴一段代码打包时会有会使用一个默认模板我们定义为index.html 复制代码替换你的index.html 模板-- 设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。-->-- 设定禁止浏览器从本地机的缓存中调阅页面内容 -->-- 清除缓存，再次访问这个网址要重新下载 -->

Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决

solocoder的博客

04-13

3934

vue项目白屏问题汇总，多方案详细解决

小圣贤君的博客

04-01

1万+

来了，兄弟，别急，咱们慢慢往下看。项目打包之后，本地打开文件显示白屏了？微信公众号里打开项目白屏了？苹果手机打开白屏了？死活都有部分iPhone机型是白屏显示的？兄弟，别急，咱们走起…… 1，ios10 出现白屏原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时，我们错误地认为这是一个语法错误。解决方法如下：进入build文件夹；找到w...

Soybean Admin 配置vite兼容低版本浏览器、安卓电视浏览器(飞视浏览器)

前端开发工程博客

04-10

796

Soybean Admin 配置vite兼容低版本浏览器、安卓电视浏览器，解决了网页在小米电视的飞视浏览器访问页面空白的问题。

基于 Vue3打造前台+中台通用提效解决方案（上）

oschina_41559824的博客

03-04

4914

本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？如果大家对的构建机制有了解的话，那么应该可以发现一个问题。那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在的内容怎么办?是不是就意味着无法解析呢? 是的! 在的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。比如因为

android 最低兼容版本,vue cli3 es6 安卓低版本 兼容问题

weixin_36304352的博客

05-26

1836

问题：1.在测试在三星安卓7.0版本中报错，其他手机可以，低版本安卓手机出现白屏，(注释：如果静态div是正常的如图)报错内容：`[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token ...[vue-router] uncaught error during route navi...

vue3+vite适配浏览器+兼容安卓

m0_70334976的博客

07-13

2318

import legacyPlugin from '@vitejs/plugin-legacy' //兼容安卓低版本浏览器。// 适配图表需重新计算配置项中的数值,监听resize 背景图需background-size:100% 100%- env.development / production 文件中配置 VITE_BASE_PATH=/xxxxx/// 打包命令行输入 npm run build:base -- base /xxxx。-routes/index.ts中。

Vue3 + Vite 老版本浏览器白屏兼容问题

HongSH945的博客

10-15

2388

该文章记录了打包 vue 项目时，出现白屏以及对应的解决方案

Vue3 + Vite 页面白屏问题（开发环境+生产环境）

Yana's Blog

05-06

9710

在一次开发过程中，使用 Vue3 + Vite 做了几个简单页面，支持 PC 端和手机端， PC 端测试一切安好，手机端访问本地 IP 进行预览，苹果手机功能正常，但安卓手机直接白屏。

Vue解决低版本安卓不兼容白屏的问题

yyf326的博客

04-30

4908

问题： vue写的移动端项目，部分低版本安卓手机出现，白屏，以及页面数据渲染不完整。原因：安卓低版本手机是不支持ES6语法的，还有少部分低版本安卓不支持小部分的ES5语法，因此vue使用的是ES6语法，所以会导致页面渲染问题。解决问题方式，注意看重点是下面的东西：第一步：npm 安装 npm install babel-polyfill --save npm install es6-pro...

vite如何兼容低版本浏览器