注:

1.使用vue-cli搭建的项目,默认不支持IE浏览器;
2.使用本文方法解决IE的兼容性问题后,仍然默认不支持IE8及以下的版本(vue在创建之时就排除了IE8及以下版本的支持性);
3.解决es6的语法支持性问题;

步骤:

一:支持IE9+
1.1:安装babel-polyfill

命令:npm install babel–polyfill --save-dev

1.2:修改webpack.base.conf.js

找到入口entry,增加babel-polyfill的引用:
module.exports = {

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

1.3:在main.js中引入babel-polyfill

在文件最上方增加代码:
import “babel-polyfill”

注意:

步骤1.2和1.3都要做;
在部分百度文档中,此两个步骤只做其一即可,在作者当前项目中不适用;
读者们可以根据实际情况来选择性使用;

1.4:babel-loader 中指定模块转码

前面三项修改,一般已经满足项目需求;但是在实际项目中,我们会发现,ie9甚至ie11变得不可用的情况;
至于为何设置了poly-fill还是报错?
因为在项目中使用了第三方的ui框架(如:elementUI)、库、插件等,并且这第三方的底层有es6的语法。
此时我们可以按照如下更改:

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

比如我这里用了element-ui 跟 vue-awesome,可以修改成如下:

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

按照1.4修改完成,在项目不支持ie的前提下,此时起码可以支持ie11;

二:支持ES6语法

例如: => 箭头函数可能会报promise错误;

2.1:安装支持es6语法的插件

命令:npm install es6-promise --save-dev

2.2:在main.js中全局引入插件

import promise from ‘es6-promise’
promise.polyfill()

完成!!!此时即可兼容IE9+浏览器与es6语法;

Logo

前往低代码交流专区

更多推荐