Vue3 + Vite 老版本浏览器白屏兼容问题

最新推荐文章于 2025-04-15 15:49:59 发布

_真相只有一个

最新推荐文章于 2025-04-15 15:49:59 发布

阅读量1.9k

点赞数 29

文章标签： javascript 前端开发语言 vue.js

本文链接：https://blog.csdn.net/HongSH945/article/details/142961895

版权

Vue3 + Vite，老旧设备访问白屏问题以及解决方案

前言

该文章记录一下自己个人项目打包发布后，老旧设备的浏览器打开出现白屏的解决方案
造成这一现象的主要原因是，浏览器不支持 ES Module 方式引入模块新特性，导致白屏

这也是 Vite 速度能这么快的原因之一，因为采用 ES module 引入，所以开发的时候几乎是无感秒刷

解决过程

顺带给大家推荐一个老牌网站 can i use 在这里你可以找到几乎所有关于浏览器版本兼容的数据

1. 官网说默认的构建目标是能支持原生 ESM 语法的 script 标签、原生 ESM 动态导入和 import.meta 的浏览器。

官网对浏览器支持的描述

2. 然后让我们看看默认方案下打包出来的 index.html 有多简洁

以下是我的 Demo 打包出来的源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <script type="module" crossorigin src="/assets/index-DvhnaZlz.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-lQx-ob2F.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

3. 在 Can I use 中我们可以找到以下信息，各家浏览器对 ES Module 支持情况还是挺好的

ES Module 引入各主流浏览器支持情况
从图中可看出各主流浏览器对ES module 几乎都已经支持了

除了一言难尽的 IE 和 opera Mini 之外只要浏览器版本不要太旧，就可以支持。好在 IE 已经于 2022 年 6 月 15 日停止服务，喜大普奔！

4. 如何支持旧版本

根据官方提供的方案，只需要在 vite.config.js 中引入 @vitejs/plugin-legacy 模块并修改配置，即可

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
   
  plugins: [
    legacy({
   
      targets: ['defaults', 'not IE 11'],