vue在IE和360兼容模式下无法显示问题

本文介绍了Vue项目在IE和360兼容模式下遇到的ES6兼容问题,详细讨论了babel-polyfill的使用方法,包括在webpack配置中的不同引入方式以及直接引入。尽管一些常规方法未能生效,但作者提供了两种经过验证可行的解决方案,一种是在webpack.base.conf.js中将'babel-polyfill'放在entry的首位,另一种是直接在HTML中引入polyfill。

babel-polyfill

babel-polyfill 是针对全局环境的,引入它浏览器就好像具备了规范里定义的完整的特性,一旦引入,就会跑一个 babel-polyfill 实例。用法如下:

1.安装 babel-polyfill

npm install babel-polyfill --save

2.在入口文件中引用:

import 'babel-polyfill'

针对ES6的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的ES6语法转换成ES5,相当于在ES6和浏览器之间做了一个翻译官。比较通用的工具方案有babel,jsx,traceur,es6-shim等。

 

 

法一:webpack.base.conf.js中配置

entry: {

app: ["babel-polyfill","./src/main.js"],

}

 

entry: {

app: "./src/main.js",

"babel-polyfill":"babel-polyfill"

}

 

 

法二:在main.js中引入

import 'babel-polyfill'

 

但上述方法都未生效!

本人亲测下列两种方法可行:

法一:webpack.base.conf.js中配置

entry: {
    // "babel-polyfill"用来解决的兼容性
    app: ['./node_modules/babel-polyfill/dist/polyfill.js','./src/main.js']
}

法二:

直接引入:

<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值