问题

vue项目需要考虑浏览器兼容，太烦了

参考

解决

项目基于 vue-cli3

vue-cli3 对浏览器支持配置挺友好，只需要指定兼容浏览器或版本。项目默认使用 @vue/babel-preset-app ，它通过 @babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill，节省包大小。

默认情况下，它会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。

// babel.config.js
// 默认设置
module.exports = {
  presets: [
    '@vue/app',
    '@babel/preset-env
  ]
}

// 明确指定
module.exports = {
  presets: [
    '@vue/app',
    [
        '@babel/preset-env,
        { 'useBuiltIns': 'usage' }
    ]
  ]
}
复制代码

package.json browserslist 配置

{
    "browserslist": [
        "defaults",
        "not IE < 10",
        "maintained node versions"
    ]
}
复制代码

.browserslistrc 文件配置

# Browsers that we support

defaults
not IE < 10
maintained node versions
复制代码

更多 browserslist 配置规则查看 这里

其它框架

1. 按照 babel-polyfill

npm install babel-polyfill --save-dev
复制代码

2、在main.js 引用 babel-polyfill

// main.js
import 'babel-polyfill'
复制代码

3、修改webpack，entry配置

module.exports = {
    entry: {
        app: ['babel-ployfill','./src/index.js']
    }
}
复制代码

其他兼容（留言补充）

1、flex 样式兼容

// 定义样式 flex: 1 0; 通常省略第三参数 flex-basis，默认 auto
// 但是
// ie浏览器，flex-basis 默认值是0
// 需要手动指定
// 所以项目需要兼容ie
// flex 样式最好写完整，如 flex: 1 0 auto;
复制代码