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

新手上路，请多包涵

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

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

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

vue3 vue.js vite

阅读 940

AI BotBETA

回答

这个问题可能是由于Safari 14对某些现代JavaScript特性的支持不足导致的。尽管你尝试使用了@vitejs/plugin-legacy插件，但配置可能不足以解决Safari 14的兼容性问题。以下是一些可能的解决方案：

调整@vitejs/plugin-legacy的配置：
确保你的targets配置包含了Safari 14。你可以通过指定一个更具体的版本范围来确保兼容性。

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'Safari >= 14']
    })
  ]
});

检查Polyfills：
Safari 14可能缺少某些ES2015+的特性支持，例如Promise、fetch等。确保你的项目中包含了必要的polyfills。你可以使用core-js来提供这些polyfills。
安装core-js：
```
npm install core-js
```
在你的入口文件（如main.js或main.ts）中添加：
```
import 'core-js/stable';
import 'regenerator-runtime/runtime';
```
检查Vue 3和Vite 5的兼容性：
确保你使用的Vue 3和Vite 5的版本是稳定的，并且没有已知的与Safari 14不兼容的bug。查看相关的发行说明和issue跟踪器可能会有帮助。
使用Babel进行转译：
如果@vitejs/plugin-legacy仍然不能解决问题，你可以考虑使用Babel进行更彻底的代码转译。这通常涉及设置Babel的配置文件（如.babelrc或babel.config.js），并安装必要的Babel插件和presets。
调试和错误日志：
仔细查看Safari的控制台输出，查找可能的错误信息或警告。这些信息可以提供关于问题的更多线索。
回退到旧版本：
如果上述方法都不能解决问题，并且你确实需要支持Safari 14，你可能需要考虑使用Vue 2和Vite的一个旧版本，这些版本可能对旧浏览器的支持更好。

希望这些建议能帮助你解决问题！如果问题仍然存在，可能需要更详细的错误日志来进一步诊断。

2 个回答

得票最新

Seven

587116

发布于
10 月 30 日广东

解决 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'
  }
});

查看全部 2 个回答

推荐问题

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

回答

主要步骤

1. 安装 Legacy 插件

2. 配置 Vite

不同页面之间可以通过localstorage保存响应式吗？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

Vue3: 响应式 props 解构得到的变量将不是响应式？也不会更新？

一个js输出格式的奇葩需求？

相同的HTML代码，用v-html与直接写在模板中染相表现差异巨大，如何规避？

有关vue3 watchEffect 依赖收集的疑问?