Vue项目兼容IE(续) babel7.4.0+
Posted 奋飛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目兼容IE(续) babel7.4.0+相关的知识,希望对你有一定的参考价值。
关于 vue-cli 项目兼容 IE 的内容,请查看 https://blog.csdn.net/ligang2585116/article/details/103554818
本文针对 babel 7.4.0+ ,处理方式仍然是寻找相应 Babel polyfill。
转换 ES6+ 代码
这里我们仍然采用官方「第3种」 方式。
- babel.config.js 无需修改(这里需要特别注意)
module.exports =
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
'add-module-exports'
]
- 在入口文件处(默认
main.js
)增加相关 polyfill。
main.js 放到开头处
import 'core-js/stable'
import 'regenerator-runtime/runtime'
这里无需增加任何依赖!
- 针对 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
,也可以显式声明。
以上是关于Vue项目兼容IE(续) babel7.4.0+的主要内容,如果未能解决你的问题,请参考以下文章