前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue项目兼容IE(续) babel7.4.0+

Vue项目兼容IE(续) babel7.4.0+

作者头像
奋飛
发布2022-02-10 12:40:04
9300
发布2022-02-10 12:40:04
举报
文章被收录于专栏:Super 前端

关于 vue-cli 项目兼容 IE 的内容,请查看 https://cloud.tencent.com/developer/article/1869378

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

转换 ES6+ 代码

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

  1. babel.config.js 无需修改(这里需要特别注意
代码语言:javascript
复制
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    'add-module-exports'
  ]
}
  1. 在入口文件处(默认 main.js)增加相关 polyfill。

main.js 放到开头

代码语言:javascript
复制
import 'core-js/stable'
import 'regenerator-runtime/runtime'

这里无需增加任何依赖!

  1. 针对 Proxy 对象进行 polyfill,在 index.html 文件中引入 es6-proxy-polyfill.js
代码语言:javascript
复制
<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

代码语言:javascript
复制
 transpileDependencies: [/node_modules[/\\\\](element-ui|vuex|)[/\\\\]/],

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

修改 vue-router mode(IE9需要)

代码语言:javascript
复制
new Router({
	mode: 'hash'
})

或者,增加 fallback 参数

代码语言:javascript
复制
new Router({
	mode: 'history',
  fallback: true
})

默认值为true,也可以显式声明

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022/02/08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 转换 ES6+ 代码
  • transpileDependencies
  • 修改 vue-router mode(IE9需要)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档