vue-cli 3 打包支持 IE

[huangshuwei]

前言

很多情况下，我们还是需要支持 IE 的。vue-cli 3 打包支持IE 和 vue-cli 稍有差异。

回顾vue-cli 2 打包支持IE

babel 配置

// babel.config.js
module.exports = {
    presets: [
        ["@vue/app",
            {
                "useBuiltIns": "entry"
            }
        ],
    ]
...
}

修改入口文件
安装 @babel/polyfill

yarn add @babel/polyfill

在入口文件引入

 import '@babel/polyfill'

设置浏览器兼容
根据实际情况设计你的浏览器兼容方案

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

vue-cli 3 打包支持IE

babel 配置

// babel.config.js
module.exports = {
    presets: [
        [
            "@vue/app",
            {
                useBuiltIns: "entry",
                corejs: 3,
                targets: {
                    ie: "11"
                },
                jsx: {
                    injectH: false
                }
            }
        ]
    ]
...
}

修改入口文件
安装 core-js 和 regenerator-runtime

yarn add core-js regenerator-runtime

在入口文件引入

import "core-js/stable";
import "regenerator-runtime/runtime";

设置浏览器兼容
根据实际情况设计你的浏览器兼容方案

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

transpileDependencies
默认打包时不会检查依赖包，上述的配置只会检查项目本身代码，并做兼容处理。如果发现上述配置还是不支持IE,那么你要排除是否是以来包引起。如highlight.js就是不支持IE 的第三方包，配置如下

// vue.config.js
module.exports = {
  transpileDependencies: ["highlight.js"];
  ...

}

完