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