vite+vue3项目解决低版本兼容性问题解决方案(Safari白屏)

更新时间：2024年03月18日 09:55:11 作者：慢慢雨夜

这篇文章主要介绍了vite+vue3项目解决低版本兼容性问题（Safari白屏）,使用官方插件 @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持,本文给大家介绍的非常详细,需要的朋友可以参考下

vite+vue3项目解决低版本兼容性问题（Safari白屏）

使用官方插件 @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持。

1. 使用npm命令进行插件安装

npm add -D @vitejs/plugin-legacy

2. 在 vite.config.js 配置文件中的 plugins 数组中引入它

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

解决vite+vue3混合开发白屏问题

开发环境：vite4.0+vue3.2
使用场景：vite打包后将包嵌入app使用。
问题描述：打包后app显示白屏。
解决方案：默认的构建目标是能支持原生 ESM 语法的 script 标签、原生 ESM 动态导入和 import.meta 的浏览器。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持

1.安装兼容插件 @vitejs/plugin-legacy
npm i @vitejs/plugin-legacy

2.在vite.config plugins中配置

legacy({
targets: ['defaults', 'not IE 11']
}),

3.先执行 npm run build 命令进行打包，打包完成后打开 dist/index.html。
将index.html中所有的<script></script> 标签中的 type="module"、crossorigin、nomodule 删除。

ps:以上步骤做完如果还存在白屏可能是浏览器版本过低，可以在vite.config中设置legacy兼容低版本。
如

 legacy({
targets: ['chrome 62'],
}),

到此这篇关于vite+vue3项目解决低版本兼容性问题（Safari白屏）的文章就介绍到这了,更多相关vite vue3项目兼容低版本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
这篇文章主要介绍了vue项目使用高德地图的定位及关键字搜索功能的实例代码，也是小编踩了无数坑总结出来的经验,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
element-plus中el-upload组件限制上传文件类型的方法
Element Plus 中,el-upload 组件可以通过设置 accept 属性来限制上传文件的格式,这篇文章主要介绍了element-plus中el-upload组件限制上传文件类型,需要的朋友可以参考下
2024-02-02
vue学习笔记五：在vue项目里面使用引入公共方法详解
这篇文章主要介绍了在vue项目里面使用引入公共方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue项目如何安装引入使用Vant
Vant是一个专为移动端设计的轻量级组件库,自2017年开源以来,提供了Vue2、Vue3及多平台版本支持,安装Vant时需要注意版本兼容问题,Vue3项目应安装最新版Vant3,而Vue2项目则需安装Vant2,安装错误时,需卸载后重新安装正确版本
2024-10-10
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
这篇文章主要介绍了父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法,需要的朋友可以参考下
2018-04-04
Vue3指令之搜索框输入防抖功能实现
在Vue开发中遇到了搜索框输入防抖处理,算是防抖的使用场景之一吧,这篇文章主要给大家介绍了关于Vue3指令之搜索框输入防抖功能实现的相关资料,需要的朋友可以参考下
2022-12-12
vue3实现问卷调查的示例代码
本文主要介绍了vue3实现问卷调查的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
Vue.js实现表格动态增加删除的方法（附源码下载）
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，下面这篇文章主要给介绍了Vue.js实现表格动态增加删除的方法实例，文末提供了源码下载，需要的朋友可以参考借鉴。
2017-01-01
Vue中key的作用示例代码详解
key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。这篇文章主要给大家介绍Vue中key的作用，感兴趣的朋友跟随小编一起看看吧
2020-06-06
vue+element实现图片上传及裁剪功能
这篇文章主要为大家详细介绍了vue+element实现图片上传及裁剪功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06