Vite5+Vue3项目打包后在Safari14白屏报错如何解决？

Question

vite5+vue3工程 打包发布到生产环境之后safari14的版本白屏报错如下 请问大佬们有遇到这个问题嘛。。高版本浏览器没有这个问题。。。

尝试使用plugin-legacy兼容低版本浏览器没有作用

import legacy from '@vitejs/plugin-legacy'
...
legacy({
    targets: ['defaults','Safari >= 13','iOS >= 13'],
}),

Answer 1

很简单的，你用 🔗 Browserslist 然后输入 defaults, not IE 11 查看一下目标浏览器清单就知道为啥不行了。

Answer 2

解决 Safari 14 中的白屏问题，以下是步骤：

主要步骤

1. 安装 Legacy 插件

使用 npm 或 yarn 安装 @vitejs/plugin-legacy 插件：

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

或

yarn add @vitejs/plugin-legacy --dev

2. 配置 Vite

在 vite.config.ts 文件中添加并配置 @vitejs/plugin-legacy 插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ],
  build: {
    target: 'es2015'
  }
});