记录一下vue兼容ie8以上

最新推荐文章于 2024-03-11 11:31:05 发布

原创最新推荐文章于 2024-03-11 11:31:05 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Babel-Polyfill进行项目配置，包括下载安装、main.js引入、.babelrc文件修改及Number对象问题解决方案。适用于希望兼容不同浏览器版本的前端开发者。

1.下载babel-polyfill

npm install babel-polyfill --save-dev

2.在main.js里面加入import 'babel-polyfill'

3.修改.babelrc

添加useBuiltIns

false - 不做任何操作
entry - 根据浏览器版本的支持，将 polyfill 需求拆分引入，仅引入有浏览器不支持的polyfill
usage - 检测代码中 ES6/7/8 等的使用情况，仅仅加载代码中用到的 polyfill

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "entry"
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

4.Number对象

即使在使用 babel-polyfill 做代码翻译后，发现还是有一些 es6 的新特性并没有解决，比如说 Number 对象的 parseInt 和 parseFloat 方法

es6 将全局方法 parseInt() 和 parseFloat() ，移植到 Number 对象上面，行为完全保持不变。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。

解决这个问题不需要引入包来解决，同样在项目主入口文件 main.js 加入以下代码（代码尽可能靠前，最好是在引用 babel-polyfill 之后）

1 2	`if` `(Number.parseInt === undefined) Number.parseInt = window.parseInt;` `if` `(Number.parseFloat === undefined) Number.parseFloat = window.parseFloat;`