博客站

Vite 默认针对现代浏览器进行优化，但通过适当的配置和工具，也可以支持旧版浏览器。以下是 Vite 支持旧版浏览器的几种方法：

1. 使用 @vitejs/plugin-legacy 插件

• 插件功能：@vitejs/plugin-legacy 插件可以为旧版浏览器生成兼容的代码。
• 配置示例：

  import legacy from '@vitejs/plugin-legacy';
  
  export default {
    plugins: [
      legacy({
        targets: ['defaults', 'not IE 11'],
      }),
    ],
  };
  

• 生成内容：
  • 为现代浏览器生成 ES 模块代码。
  • 为旧版浏览器生成传统脚本（如 SystemJS）和 polyfills。

2. 配置构建目标

• 设置 build.target：在 vite.config.js 中设置 build.target 以指定构建目标。
• 配置示例：

  export default {
    build: {
      target: 'es2015', // 或 'es5'
    },
  };
  

3. 使用 Polyfills

• 手动引入 Polyfills：在项目中手动引入所需的 polyfills。
• 使用 core-js：

  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  

4. 配置 browserslist

• 设置 browserslist：在 package.json 或 .browserslistrc 文件中配置 browserslist，以指定需要支持的浏览器范围。
• 配置示例：

  {
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not dead"
    ]
  }
  

5. 使用 @vitejs/plugin-react 插件（React 项目）

• 插件功能：@vitejs/plugin-react 插件支持 React 项目，并可以通过配置支持旧版浏览器。
• 配置示例：

  import react from '@vitejs/plugin-react';
  
  export default {
    plugins: [
      react({
        jsxRuntime: 'classic', // 支持旧版 React
      }),
    ],
  };
  

6. 使用 @vitejs/plugin-vue 插件（Vue 项目）

• 插件功能：@vitejs/plugin-vue 插件支持 Vue 项目，并可以通过配置支持旧版浏览器。
• 配置示例：

  import vue from '@vitejs/plugin-vue';
  
  export default {
    plugins: [
      vue({
        template: {
          compilerOptions: {
            // 配置 Vue 模板编译器选项
          },
        },
      }),
    ],
  };
  

总结

Vite 默认针对现代浏览器进行优化，但通过使用 @vitejs/plugin-legacy 插件、配置构建目标、引入 polyfills、设置 browserslist 以及使用框架特定的插件，可以支持旧版浏览器。这些方法确保 Vite 项目在旧版浏览器中也能正常运行。