支持版本介绍
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也提供了插件,直接安装引入即可
- 安装
yarn add @babel/polyfill -S //yarn
npm i @babel/polyfill -S //npm
- 在项目加载前引入,以下选择一种即可
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()
}
}