前端浏览器兼容问题汇总（持续更新）

🐰
…

vue-cli3兼容ie

如果以下配置都不行：请检查是否是第三方插件的原因

详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
- 五步究极配置（能解决一般vue项目，element待议）

配置.browserslist

browserslist 配置自动检测需要转译的语言特性，为构建代码转译JavaScript 并为 CSS 添加浏览器前缀

通常只需要修改 browserslist 即可兼容目标浏览器

配置这一项，有两个途径：

一是在 package.json文件中，添加 browserslist 字段；
二是在项目根目录，创建一个 .browserslistrc 文件
这两种方法不能同时配置，不然运行serve命令会报错。

例如兼容IE10可以做如下配置：

1
2
3

> 1%
last 4 versions
ie 10

配置babel-polyfil

安装babel-polyfil模块

1	npm install babel-polyfill -s

vue.config.js文件

如果确切知道有兼容性问题的依赖包名，可以将依赖包名添加到 transpileDependencies 键中

这会为该依赖同时开启语法语法转换和根据使用情况检测 polyfill。

例如：
1
2
3
module.exports = {
transpileDependencies: ["vue-plugin-load-script"] // 需要编译的依赖包名
}

在 vue.config.js 中的 configureWebpack 字段中

configureWebpack: config => {
   config.entry.app = ["babel-polyfill", "./src/main.js"];
   // config.entry.app = ["babel-polyfill", resolve('src/main.js')] 
   // config.entry('main').add('babel-polyfill') // main是入口js文件
}

babel.config.js文件

如果确切的知道需要转译的语言特性，可以配置根目录下的babel.config.js，为presets的值添加所需要的 polyfill

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.symbol'
      ]
    }]
  ]
}

然而更多的情况是，我们并不确切的知道项目中引发兼容问题的具体原因，这时还可以配置为根据兼容目标导入所有 polyfill，需要设置babel.config.js为：

module.exports = {
  presets: [
    ['@vue/app', {
        useBuiltIns: 'entry'
    }]
  ]
}

同时在入口文件（main.js）第一行添加

1	import '@babel/polyfill'

注意：这种方式可能导入代码中不需要的polyfill，从而使打包体积更大。

第三方插件兼容ie

vue-echarts在ie不兼容的解决办法