vue实现ie兼容

Vue 项目实现 IE 兼容方案

Vue 项目在 IE 浏览器中运行时可能因 ES6+ 语法、Proxy 等问题报错。以下是关键解决步骤：

安装 babel-polyfill 依赖

在项目中安装 core-js 和 regenerator-runtime：

npm install core-js regenerator-runtime --save

配置 babel.config.js

修改 Babel 配置以支持 IE：

module.exports = {
  presets: [
    [
      '@vue/cli-plugin-babel/preset',
      {
        useBuiltIns: 'usage',
        corejs: 3,
        targets: {
          ie: '11'
        }
      }
    ]
  ]
}

修改入口文件

在 main.js 最顶部引入 polyfill：

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

解决 Vuex 兼容问题

IE 不支持 Promise，需在 store/index.js 中引入：

import 'es6-promise/auto'

配置 vue.config.js

调整 transpileDependencies 选项：

module.exports = {
  transpileDependencies: [
    /\/node_modules\/element-ui\//,
    /\/node_modules\/vuex\//
  ]
}

处理 IE 特定 CSS 问题

添加针对 IE 的 CSS 修复：

@media all and (-ms-high-contrast: none) {
  .el-table__body { height: 100%; }
  .flex-container { display: flex; }
}

添加 IE 兼容 meta 标签

在 public/index.html 中加入：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

检查 webpack 配置

确保 @babel/preset-env 正确配置：

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

使用 polyfill-service（可选）

在 index.html 头部添加：

<script src="https://polyfill.io/v3/polyfill.min.js?features=default,es6,es7,es2015,es2016,es2017,es2018,es2019"></script>

验证兼容性

打包后使用 IE 开发者工具（F12）检查：

1. 确认没有语法错误
2. 检查网络请求是否正常
3. 验证主要功能交互

以上方案可解决 Vue 2.x 项目在 IE11 中的大部分兼容性问题。对于 Vue 3.x 项目，由于使用了 Proxy，需额外考虑替代方案或放弃对 IE 的支持。