VUE兼容IE及iview按需引入兼容IE问题

支持版本介绍

vue支持IE8以上的浏览器，vue数据追踪的核心defineProperty不被IE8及以下的浏览器支持，具体原因见vue官网介绍

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

如何支持IE8以上的浏览器

支持原理

IE不支持ES6+语法，开发过程中难免使用ES6及以上的语法，所以在IE浏览器中会报错。

解决方案

解决方案很简单，将ES6转为ES5即可，babel也提供了插件，直接安装引入即可

1. 安装

yarn add @babel/polyfill -S //yarn
npm i @babel/polyfill -S //npm

2. 在项目加载前引入，以下选择一种即可

main.js 第一行引入

import "@babel/polyfill";

webpack打包入口中配置

entry: {
  app: ["@babel/polyfill", "./src/main.js"]
}

cli4在vue.config.js中配置（没有则新建一个）

module.exports = {
  configureWebpack: config => {
    config.entry.app = ["@babel/polyfill", "./src/main.js"];
  }
}

iview按需引入兼容IE问题

iview按需引入导致，babel遗漏了一些js文件的解析，解决思路是通过手动增加rules识别解析

• 在webpack的rules中增加规则
  test匹配文件，use使用loader去解析

{
  test: /view-design.src.*?js$/,
  use: 'babel-loader'
}

• cli4 增加规则使用chainWebpack，在vue.config.js配置

module.exports = {
  chainWebpack:  config => {
    config.module
      .rule('iview')
      .test(/iview.src.*?js$/)
      .use('babel')
        .loader('babel-loader')
        .end()
  }
}