# Vue-typescript项目兼容IE浏览器 {#vue-typescript项目兼容ie浏览器}

Vue typescript项目如何兼容ie浏览器

# 一、添加依赖 {#一、添加依赖}

注意

1. 此处我用的是yarn包管理，npm也一致，使用npm命令即可

2. 此处依赖为我使用的版本，其他版本没有测试，推荐与我使用版本一致

添加依赖 @babel/polyfill 此处我用的版本是 "@babel/polyfill": "^7.12.1"

yarn add @babel/polyfill

添加依赖 @vue/cli-plugin-babel ，此处我用的版本是 "@vue/cli-plugin-babel": "^4.3.1"

yarn add @vue/cli-plugin-babel

# 二、配置 vue.config.js {#二、配置-vue-config-js}

在 vue.config.js 中添加如下信息

transpileDependencies: ['fuse.js', 'vuex-module-decorators','element-ui'],

其中 fuse.js , vuex-module-decorators , element-ui 是需要 babel 进行转义成 es5 的的依赖

如果在使用过程中引入其他的依赖，发现依赖包中不是 es5 语法，也可以添加到此处

# 三、引入包到main.ts {#三、引入包到main-ts}

在 main.ts 中添加

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

# 四、创建 .babelrc 文件 {#四、创建-babelrc-文件}

在项目根目录创建 .babelrc

写入如下内容

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

# 五、创建 babel.config.js 文件 {#五、创建-babel-config-js-文件}

在项目根目录创建 babel.config.js 文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

# 六、解决 {#六、解决}

运行项目，打包部署测试一下吧