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

最新推荐文章于 2025-03-16 11:53:10 发布

qq_34260930

最新推荐文章于 2025-03-16 11:53:10 发布

阅读量1w

点赞数

分类专栏： vue问题文章标签： vue 兼容性

本文链接：https://blog.csdn.net/qq_34260930/article/details/79150405

版权

1 篇文章

订阅专栏

本文介绍了解决360浏览器兼容模式下出现的[vuex] vuexrequiresaPromisepolyfillinthisbrowser错误的方法。通过详细分析360浏览器的工作原理及ES6兼容性问题，并提供了有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

360兼容模式下报错：[vuex] vuex requires a Promise polyfill in this browser.

原因：

360浏览器中包含了两个浏览器
一个是IE（Trident内核），即兼容模式，在使用网银时需要切换为兼容模式
一个是Chrome（Chrommium内核），即极速模式，普通浏览时使用

Chrome：51 版起便可以支持 97% 的 ES6 新特性。
Firefox：53 版起便可以支持 97% 的 ES6 新特性。
Safari：10 版起便可以支持 99% 的 ES6 新特性。
IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

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> 
 