Skip to content

zqy233/vite-vue2-ie-template

Repository files navigation

EN | 中文

Vite + Vue 2 IE 兼容模板

⚠️ Vue 3 不支持 IE。本模板使用 Vue 2 搭配 @vitejs/plugin-legacy 插件,在 生产构建阶段 兼容 IE11 和 IE10。

🧪 在线演示地址(支持 IE):https://zqy233.github.io/vite-vue2-ie-template/#/login ⚠️ 注意:IE 默认以兼容模式(IE7)打开页面,需手动切换为 IE11 或 IE10。

✅ 环境(建议使用最新版本)

  • Node.js:v24.4.1
  • pnpm:v10.13.1

⚠️ 重要说明

1. Vite 不再支持已结束维护的 Node.js 18

Vite 要求使用 Node.js 20.19+22.12+。 已验证 Node.js v24.5.1 可正常用于开发和构建。

2. 开发模式下 IE 白屏是正常现象

@vitejs/plugin-legacy 插件仅在 生产构建 中生效,开发模式(vite dev)中不支持。 如需在 IE 中测试,请先执行构建,再在 IE 中打开构建产物。

3. IE 默认以兼容模式(IE7)打开页面,需手动切换为 IE11 或 IE10

建议使用 Microsoft Edge 的 IE 模式进行测试:

测试步骤:

  1. 执行构建,并使用 Live Server(VSCode 插件)打开构建输出目录中html。

  2. Microsoft Edge 中打开页面,并通过菜单切换到 IE 模式。

  3. 使用 IEChooser.exe 工具选择浏览器标签页并切换 IE 版本:

    Win + R → 输入 %systemroot%\system32\f12\IEChooser.exe, 然后在右上角切换为 IE11/IE10。

✅ 已验证:IE11 和 IE10 可正常展示。 ❌ 不支持更低版本(如 IE9 或 IE8)。


依赖概览

本项目使用与 Vue 2 兼容的最新依赖版本。

依赖包名称 版本 说明
vue 2.7.16 Vue 2 最终版本
vue-router 3.6.5 Vue 2 对应的最终版本
vuex 3.6.2 Vue 2 对应的最终版本
element-ui 2.15.14 Vue 2 专用,Vue 3 请使用 element-plus
vxe-table 3.x Vue 2 版本,强大的行内编辑表格
sass 最新 已配置vite关闭旧版本 Sass 语法的警告
@vitejs/plugin-legacy 为旧浏览器添加 polyfill 和语法降级
simple-git-hooks, prettier, lint-staged 实现提交时自动格式化代码

Vite 插件说明

  • unplugin-auto-import:自动引入函数(支持 Vue 2.7 的组合式 API)。
  • unplugin-vue-components:自动注册 components 目录下的 Vue 组件。
  • 可通过配置自动引入 Element UI 的组件及样式。

公共配置说明

全局配置(如 API 地址等)建议写在 public/config.js 中,避免被打包压缩。


🧩 已知问题与解决方案

⚡ unplugin-vue-components 按需导入样式导致vite热更新卡顿

unplugin-vue-components插件,开发环境按需导入样式会导致 vite 热更新卡顿

unplugin/unplugin-vue-components#361

解决方案: 开发模式下关闭样式自动引入,仅在生产环境启用:

Components({
  resolvers: [
    ElementUiResolver({
      importStyle: mode === 'development' ? false : 'sass',
    }),
  ],
}),

对于 Element UI 的函数式组件(如 $message$notify 等),样式不会自动引入,需在生产环境手动添加:

{
  name: 'import-element-ui-style',
  enforce: 'pre',
  transform(code, id) {
    if (/src\/main.js$/.test(id) && mode === 'production') {
      return {
        code: `${code}
import 'element-ui/lib/theme-chalk/message.css';
import 'element-ui/lib/theme-chalk/notification.css';
import 'element-ui/lib/theme-chalk/message-box.css';`,
        map: null,
      }
    }
  },
},
🎨 element-ui 自定义主题色与unplugin-vue-components按需导入样式冲突解决

element-ui 自定义主题色 https://element.eleme.cn/2.0/#/zh-CN/component/custom-theme

首先看下不使用unplugin-vue-components按需导入样式下怎么自定义主题色

创建common.scss文件,文件目录src/assets/css/common.scss,并在main.js中引入

common.scss文件内容

$--color-primary: #8956ff;
$--font-path: 'element-ui/lib/theme-chalk/fonts';
@import 'element-ui/packages/theme-chalk/src/index.scss';

main.js文件内容

import Vue from 'vue';
import Element from 'element-ui';
import '@/assets/css/common.scss';

Vue.use(Element);

无需引入 Element 编译好的 CSS 文件element-ui/lib/theme-chalk/index.css

再看下使用unplugin-vue-components按需导入样式下怎么自定义主题色

common.scss生产环境需要去除这两行,因为会与unplugin-vue-components按需导入样式冲突,重复导入样式了

$--font-path: 'element-ui/lib/theme-chalk/fonts';
@import 'element-ui/packages/theme-chalk/src/index.scss';

新建一个element-variables.scss全局 scss 变量文件,将 element-ui 的主题变量如$--color-primary: #8956ff;等移动到该文件中,因为unplugin-vue-components的原因,需要在additionalData全局 scss 变量文件中定义主题变量才能生效

注意!这个 scss 变量文件只应该存放一些 scss 变量,如果在这个文件里$--font-path: 'element-ui/lib/theme-chalk/fonts';@import 'element-ui/packages/theme-chalk/src/index.scss';会导致每次页面热更新时都会编译所有 element-ui 变量,热更新会卡顿至 3 秒左右

    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "src/assets/css/element-variables.scss";`,
          charset: false,
        },
      },
    },

定义一个 vite 插件,只有开发时才在common.scss中加入这两行代码

{
        name: 'import-element-ui-style',
        enforce: 'pre',
        transform(code, id) {
          if (/common.scss$/.test(id)) {
            if (mode === 'development') {
              return {
                code: `${code}
                $--font-path: 'element-ui/lib/theme-chalk/fonts';
                @import 'element-ui/packages/theme-chalk/src/index.scss';`,
                map: null,
              };
            }
          }
          ...
        },
      },


About

this is a template for vite+vue2+ie11

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published