vue3兼容ie浏览器

### Vue3 项目与 IE 浏览器兼容性的解决方案

为了使 Vue3 项目能够支持 Internet Explorer (IE)，需要采取一系列措施来确保代码可以在旧版浏览器上正常运行。这通常涉及到配置构建工具链以及引入必要的 polyfill。

#### 配置 Babel 编译环境

由于现代 JavaScript 特性不被 IE 支持，因此必须通过编译将 ES6+ 的语法转换成更早版本的 ECMAScript。可以利用 `@babel/preset-env` 来自动处理这一过程[^1]：

// babel.config.js
module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]
  ]
};

此设置会根据目标浏览器列表加载所需的 polyfill。

#### 修改 package.json 中 browserslist 字段

定义应用程序的目标浏览器范围，在 `package.json` 文件内添加或更新 `browserslist` 属性以包含对 IE 的支持：

{
  "browserslist": [
    "> 0.2%",
    "not dead",
    "ie >= 9"
  ]
}

上述配置意味着除了市场份额大于 0.2% 和最近两年内的主流浏览器外，还特别指定了要适配到 IE 9 及以上版本。

#### 使用 PostCSS 处理 CSS 兼容性问题

对于样式表中的新特性，可以通过 PostCSS 插件来进行前缀补丁和其他优化操作。安装并配置 `postcss-loader` 和 `postcss-preset-env` 后，这些插件会在打包过程中自动为 CSS 添加适当的 vendor prefixes 或者执行其他转换工作[^2]:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer')(),
          require('postcss-preset-env')()
        ],
      },
    }
  }
};

#### 引入核心 JS Polyfills

某些情况下仅靠转译还不够，还需要额外提供一些缺失的功能实现。推荐的方式是在入口文件顶部显式导入 core-js 提供的基础库：

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

import App from './App.vue';
...

这样做能有效解决大部分因缺少原生 API 导致的问题，并且不会影响已经具备相应能力的新一代浏览器性能表现。