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 中添加如下信息

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

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

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

三、引入包到main.ts

在 main.ts 中添加

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

四、创建 .babelrc 文件

在项目根目录创建 .babelrc

写入如下内容

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

五、创建 babel.config.js 文件

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

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

六、解决

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