vue中使用babel-polyfill解决低版本浏览器不兼容问题


vuex requires a Promise polyfill in this browser.

他说出了问题出现的原因,就是ie9和一些低版本的高级浏览器对es6新语法并不支持,也说出了解决办法

为了方便看帖子同学的使用,再重敲一遍命令行:npm install --save-dev babel-polyfill

 

babel-polyfill用正确的姿势安装之后,引用方式有三种:

1.require("babel-polyfill");

2.import "babel-polyfill";

3.module.exports {

  entry["babel-polyfill""./app/js"]

};

注:第三种方法适用于使用webpack构建的同学,加入到webpack配置文件(webpack.config.js)entry项中

重新执行构建命令,在低版本的浏览器中就可以正常打开页面了。

解决方案如下:

方案1:在 webpack.config.js 文件中,entry 入口处修改,加入即可

"babel-polyfill":"babel-polyfill",//用来解决的兼容性

例如:

entry: {
    "babel-polyfill":"babel-polyfill",//用来解决的兼容性
    app: path.resolve(__dirname, config.entry.module + "/app.js"),
    vendor: config.entry.vendor
},

方案2:不修改webpack的情况下,在你的主入口文件头部加入,例如:app.js中加入即可

import 'babel-polyfill'

例如:

import 'babel-polyfill'

import Vue from 'vue';
Vue.config.debug = true;

方案3:也就是使用cdn的资源,以js的文件加入到html页面:例如:

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

Vue2.0 之 自带浏览器里无法打开(兼容处理) - 解决方案       https://blog.csdn.net/qq_16559905/article/details/70238583

 

第二种方式:vue 解决ie9的兼容问题

当vue遇见ie9的时候,部署到服务器之后,打开居然是一片空白,vue是支持ie9的,这个时候就需要来一波兼容了

1、首先npm install --save babel-polyfill

2、然后在main.js中的最前面引入babel-polyfill

      import 'babel-polyfill'

3、在index.html 加入以下代码(非必须)

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

4、在config中的webpack.base.conf.js中,修改编译配置

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

本地文件:E:\www\svn\project\vue_manage_test

 

当然,如果你只用到了 axios 对 promise进行兼容,可以只用 es6-promise

 

npm install es6-promise --save

在 main.js 中的最前面 引入

import 'es6-promise/auto'

完成以上配置,ie9兼容就完成了

解决vue在ie9中的兼容问题     https://blog.csdn.net/landl_ww/article/details/79149461

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM