在 Internet Explorer 10（IE10）下兼容 Vue.js 的问题，主要是因为 IE10 不支持一些现代的 JavaScript 特性和标准，而 Vue.js 依赖了许多较新的特性（如 ES6、HTML5 等）。可以通过安装 Babel 和 Polyfill使 Vue2 在 IE10 上运行。

1、安装 Babel 和 Polyfill

1
pnpm install core-js regenerator-runtime --save

2、配置Polyfills

在入口文件main.js最上面引入，放在最前面

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

3、配置 Babel

安装 Babel 相关插件和预设，并将其配置为支持 IE10

1
pnpm install @babel/preset-env babel-loader --save

babel.config.js 或 .babelrc 

1
2
3
4
5
6
7
8
9
{
	"presets": [
        ["@babel/preset-env",
          {
            "targets": "> 0.25%, not dead, IE 10"
          }
        ]
  	]
}

4、配置postcss 和 autoprefixer

IE10 对 CSS 的支持较为有限，尤其是在 Flexbox、Grid 等布局属性上，因此建议使用 postcss 和 autoprefixer 来确保样式的兼容性。

1
pnpm install postcss-loader autoprefixer --save

根目录下创建postcss.config.js

1
2
3
4
5
6
7
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['> 0.25%, IE 10']
    }
  }
}

打包配置，确保 Webpack 的 target 设置为适配旧浏览器，对应为vue.config.js

1
2
3
module.exports = {
  target: ['web', 'browserslist:IE 10']
}

5、处理其他兼容性问题

  • 事件模型：Vue 在处理事件时可能会与 IE10 的事件模型不兼容。如果遇到事件绑定的问题，可以尝试手动解决事件绑定和冒泡的方式。

  • CSS：IE10 对于某些 CSS3 特性（例如 CSS Grid 或一些 Flexbox 属性）支持较差，因此你可能需要使用一些 Polyfill 或根据情况调整 CSS 布局。