Vue项目兼容IE（续） babel7.4.0+

Posted 2022-02-18 奋飛

关于 vue-cli 项目兼容 IE 的内容，请查看 https://blog.csdn.net/ligang2585116/article/details/103554818

本文针对 babel 7.4.0+ ，处理方式仍然是寻找相应 Babel polyfill。

转换 ES6+ 代码

这里我们仍然采用官方「第3种」 方式。

1. babel.config.js 无需修改（这里需要特别注意）

module.exports = 
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    'add-module-exports'
  ]

2. 在入口文件处（默认 main.js）增加相关 polyfill。

main.js 放到开头处

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

这里无需增加任何依赖！

3. 针对 Proxy 对象进行 polyfill，在 index.html 文件中引入 es6-proxy-polyfill.js

<script src = "https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>

根据项目实际情况，看是否有必要引入。如果引入，建议下载到本地，再引入。

transpileDependencies

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在 transpileDependencies 选项中列出来。

这里，使用 babel 对 elementUI、vuex（需要 Promise polyfill – Here） 进行转换

按照 Vue CLI 提供的 第 1 种方案：

如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。

vue.config.js

 transpileDependencies: [/node_modules[/\\\\\\\\](element-ui|vuex|)[/\\\\\\\\]/],

根据你的项目实际情况，动态选择处理第三方依赖

修改 vue-router mode（IE9需要）

new Router(
	mode: 'hash'
)

或者，增加 fallback 参数

new Router(
	mode: 'history',
  fallback: true
)

其默认值为true，也可以显式声明。