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
  1. 在项目加载前引入,以下选择一种即可

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()
  }
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值