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

目录
  • 如何兼容ios11
  • 如何兼容安卓7
    • 如何使用@vitejs/plugin-legacy
  • 补充知识：vue打包项目以后白屏和图片加载不出来问题解决方法
  • 总结

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兼容低版本白屏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • vue vite之LogicFlow安装核心依赖及项目初始化详解

    目录 推荐几个好用的工具 进入正题 1. 初始化项目: 2. 安装LogicFlow核心依赖: 3. 初始化目录及容器: 4. 导入LF核心模块和默认样式文件: 5. 声明LF和容器对象并在挂在时初始化: 6. 运行项目 推荐几个好用的工具 var-conv 适用于VSCode IDE的代码变量名称快速转换工具 generator-vite-plugin 快速生成Vite插件模板项目 generator-babel-plugin 快速生成Babel插件模板项目 进入正题 LogicFlow 是一

  • vue2老项目vite升级改造过程记录

    目录 前言 背景 改造过程 保留webpack的选项 vite引入和配置 vite-plugins引入 require报错问题 配置 完整配置 结束 总结 前言 Vite是一种新型前端构建工具,能够显著提升前端开发体验.它主要由两部分组成: 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR). 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源. Vite 意在提供开箱即用的配置,同时

  • Vue3从0搭建Vite打包组件库使用详解

    目录 打包配置 声明文件 打包配置 本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/plugin-vue -D -w 在 components 文件下新建vite.config.ts配置文件 import { defineConfig } from "vit

  • Vue3中Vite和Vue-cli的特点与区别详解

    目录 1. 创建3.0项目 Vite 与 Vue-cli 是什么? Vue-cli 的特点: Vite 的特点: Vite 和 Vue-cli的区别: 总结: 1. 创建3.0项目 vue-cli : 安装并执行 npm init vue@latest 选择项目功能时: 除了第一项的项目名字外,其他可以暂时No cd title npm install npm run dev :运行 npm run build: 打包 (生成一个dist文件夹) vite: 使用vite 体验更快速 npm i

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

    目录 如何兼容ios11 如何兼容安卓7 如何使用@vitejs/plugin-legacy 补充知识:vue打包项目以后白屏和图片加载不出来问题解决方法 总结 vue3打包后在低版本浏览器或webview中出现白屏,原因就是因为语法兼容问题.根据vite官方文档描述,build.target默认支持 Chrome >=87.Firefox >=78.Safari >=14.Edge >=88 传送,所以需要我们手动兼容低版本. 本篇以vite2.安卓7/ios11为例. 如何兼容

  • Vue中 引入使用 babel-polyfill 兼容低版本浏览器的方法

    目录 1. 兼容低版本浏览器方法 1.1 安装 babel-polyfill 1.2 引入 1.3(新增)在 babel.config.js 中配置 1.4 在 vue.config.js (新增)配置 transpileDependencies 2. vue-cli 2.x 中配置 babel 转换 拓展:关于 Babel 简介 注意:本文主要介绍的 vue-cli 版本:3.x, 4.x:最近在项目中使用 webpack 打包后升级,用户反馈使用浏览器(chrome 45)访问白屏.经过排查

  • Android 实现高斯模糊效果且兼容低版本

    Android 实现高斯模糊效果且兼容低版本

    一.效果演示 项目中用到了高斯模糊效果,查阅过一些资料,考虑到性能问题最终还是选择使用Android自带的RenderScript库来实现,关于使用RenderScript来实现高斯模糊网上也有很多类似的方法,大部分都总结的比较乱,此处算是做一个整理吧,供有类似需求的同学参考及学习. (项目效果图) 简单描述项目效果图的实现思路: ① 加载定义的xml的Layout ② 使用截屏方法获取当前窗口的Bitmap对象 ③ 将Bitmap对象进行压缩及高斯模糊处理 ④ 将处理过的模糊图对象作为①中所加

  • 兼容低版本IE的JScript5.5实现

    作者Blog:www.coolcode.cn IE 5.5 中的 JScript 版本是 5.5 版,它比以前版本的 JScript 中多了如数组的 push.pop.shift.unshift 方法和 encodeURI.decodeURI 等一些重要的函数.而这些增加的内容在目前其他浏览器(如 Moziila/Firefox 和 Opera)上也同样支持.因此目前开发网站一般对于 IE 浏览器只能兼容到 5.5 版,而对于更低版本的 IE(如 IE 5.IE 4 等),则不再去考虑了.虽然这

  • 微信小程序收货地址API兼容低版本解决方法

    微信官方在三月底搞了不少事情.开放个人注册权限,蓝牙,与公众号打通,未来还会开发AR,图片识别,文字识别等等能力. 起初大家只是将微信小程序当做玩具看待,相信如今会有很多人把他当成一门技术去研究了.微信小程序的想象空间已经很大. 说说新增API之一的收货地址.虽然看看兼容低版本. 先上图. API很简单,就一行代码 wx.chooseAddress(OBJECT) 调起的是原生页面,体验很不错.对电商类的小程序比较有利. 不过API是从微信客户端 6.5.6 版本开始支持.这让我想起来做andr

  • Vue3.0版本强势升级点特性详解

    目录 一.Composition API: 组合API/注入API 二.自定义渲染API(Custom Renderer API) vue2.x架构问题 三.更先进的组件 Fragment组件 Suspense组件 四.更好的TS支持 五.更快的开发体验(vite开发构建工具) 六.按需编译,体积比Vue2.x更小(Tree shaking) 七.性能比2.x快1.2-2倍 diff算法的优化 render阶段的静态提升(render阶段指生成虚拟dom树的阶段) 事件侦听缓存 减少创建组件实例

  • vue3使用Vite打包组件库从0搭建过程详解

    目录 手动搭建一个用于测试组件库组件 Vue3 项目 初始化 ts 搭建一个基于 vite 的 vue3 项目 安装插件 配置 vite.config.ts 新建入口 html 文件 app.vue 入口 main.ts 配置脚本启动项目 手动搭建一个用于测试组件库组件 Vue3 项目 本篇文章将在项目中引入 typescript,以及手动搭建一个用于测试组件库组件 Vue3 项目 因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript.vue3,同时

  • 兼容浏览器的js事件绑定函数(详解)

    因为javascript中所有对象都集成与Object,那么只有给Object原型添加一个事件绑定函数,就不需要在处理绑定事件的时候,每次写一长串代码,直接调用即可.在代码中添加红色部分代码,直接便可以在代码中直接调用 <div id="mydiv" style="cursor:pointer; background-color:#F00">nihaoa</div> <script language="javascript&q

  • Android 欢迎全屏图片详解及实例代码

    Android 欢迎全屏图片详解及实例代码

    Android 欢迎全屏图片详解 其实欢迎界面就是在主Activity之前再添加一个欢迎的Activity.在这个Activity中实现欢迎界面,和其他的Activity用法 是基本一样,只有细微的差别.     1.在Activity的onCreate方法中实现: @Override ic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); /**全屏设置,隐藏窗口所有装饰**/ getW

  • 对nginx-naxsi白名单规则详解

    白名单规则语法: BasicRule wl:ID [negative] [mz:[$URL:target_url]|[match_zone]|[$ARGS_VAR:varname]|[$BODY_VARS:varname]|[$HEADERS_VAR:varname]|[NAME]] wl:ID (White List ID) 哪些拦截规则会进入白名单 wl:0 把所有拦截规则加入白名单 wl:42 把ID为42的拦截规则加入白名单 wl:42,41,43 把ID为42, 41和43的拦截规则加

随机推荐