vue兼容IE9及以上浏览器;支持es6语法
注:1.使用vue-cli搭建的项目,默认不支持IE浏览器;2.使用本文方法解决IE的兼容性问题后,仍然默认不支持IE8及以下的版本(vue在创建之时就排除了IE8及以下版本的支持性);3.解决es6的语法支持性问题;步骤:一:支持IE9+1.1:安装babel-polyfill命令:npm install babel–polyfill --save-dev1.2:修改webpac...
注:
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语法;
更多推荐
所有评论(0)