vite+vue3项目解决低版本兼容性问题解决方案(Safari白屏)
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项目兼容低版本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vant使用datetime-picker组件设置maxDate和minDate的坑及解决
这篇文章主要介绍了vant使用datetime-picker组件设置maxDate和minDate的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了vue 设置背景颜色及透明度的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
Console 对象提供了浏览器控制台调试的接口。在不同宿主环境上它的工作方式可能不一样，但通常都会提供一套共性的功能，本文主要总结了Console的一些高级用法，感兴趣的小伙伴可以参考一下2023-04-04
elementui源码学习之仿写一个el-divider组件
这篇文章主要为大家介绍了elementui源码学习之仿写一个el-divider组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了新手入门vue 使用vue-cli创建项目的图文教程，本文是针对完全不了解过vue和npm的小白而写的,需要的朋友可以参考下2018-05-05
本篇文章主要介绍了浅谈vue-lazyload实现的详细过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了Vue中this.$emit和this.$on的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue中el-date-picker选择日期的限制的项目实践
ElementUI的el-date-picker使用时,有时候想要限制用户选择的时间范围,本文就来介绍了vue中el-date-picker选择日期的限制的项目实践,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了Vue中key为index和id的区别详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
最新评论