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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

以上是 vue中使用babel-polyfill解决低版本浏览器不兼容问题 的全部内容， 来源链接： utcz.com/z/375353.html

回到顶部