vue 兼容IE报错解决方案

IE 页面空白

报错信息

 此时页面一片空白

报错缘由

Babel 默认只转换新的 JavaScript 语法（如箭头函数），而不转换新的 API ，好比 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。

例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。为了解决这个问题，咱们使用一种叫作 Polyfill（代码填充，也可译做兼容性补丁）的技术。

简单的说，兼容问题通常是IE 对于es6 的部分新对象、表达式，语法并不支持，解决方案是使用 babel-polyfill 来正常使用ES6。

Polyfill 是什么

举个例子，有些旧浏览器不支持 Number.isNaN方法，Polyfill就能够是这样的：

if(!Number.isNaN) {
    Number.isNaN = function(num) {
        return(num !== num);
    }
}

Polyfill就是相似这样解决API的兼容问题

解决方案

一、使用babel-polyfill

引入 babel-polyfill 

npm i -S babel-polyfill

如何使用

使用它时须要在你应用程序的入口点顶部或打包配置中引入。

在main.js 引入

import 'babel-polyfill'

或者在config中的 webpack.base.conf.js中 修改配置

entry:{
    app:['babel-polyfill','./src/main.js']      
}

二、在index.html 加入如下代码（非必须）

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

三、babel-loader 中指定模块转码

增长了poly-fill仍是报错，这通常是使用了第三方的ui框架、库、插件等，而且这些ui框架、库、插件底层有es6的语法。

找到webpack.base.conf.js 中的babel-loader

好比我这里用了element-ui 跟 v-charts  修改为以下：

 {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/v-charts/src'),
          resolve('node_modules/vue-awesome'),
          resolve('node_modules/element-ui/packages'),
          resolve('node_modules/element-ui/src')
        ]
}

四、打包问题

若是是webpack代码打包出错，通常到 github webpack Issues 中能够找到答案

这个错误是由于webpack-dev-server 版本问题

五、Babel 配置 .babelrc文件

.babelrc是Babel的配置文件，放在项目根目录下。通常状况下.babelrc文件不须要修改，若是以上都作了，仍是报错，能够看下官网文档来配置下该文件

 

在项目使用 vue-cli 生成的代码中，根目录有一个 .babelrc 文件。在默认生成的模板内容中，增长 "useBuiltIns": "entry" ，这是一个指定哪些内容须要被 polyfill(兼容) 的设置
useBuiltIns 有三个设置

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

{
  "presets": [
    ["env", {
      "modules": false,
      "useBuiltIns": "entry"
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

具体相关能够查看Babel官网：https://www.babeljs.cn/

总结

一、用vue 写的项目最多能够兼容到IE9 及以上版本

二、使用 babel-polyfill

三、在babel-loader中指定须要转码的第三方的ui框架、库、插件路径

四、配置 .babelrc文件

五、Babel 是一个厉害的东西 https://www.babeljs.cn/