Henry Henry
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)

Henry

小学生中的前端大佬
  • JavaScript
  • TypeScript
  • Vue
  • ElementUI
  • React
  • HTML
  • CSS
  • 技术文档
  • GitHub 技巧
  • Nodejs
  • Chrome
  • VSCode
  • Other
  • Mac
  • Windows
  • Linux
  • Vim
  • VSCode
  • Chrome
  • iTerm
  • Mac
  • Obsidian
  • lazygit
  • Vim 技巧
  • 分类
  • 标签
  • 归档
  • 网站
  • 资源
  • Vue 资源
GitHub (opens new window)
  • JavaScript

  • TypeScript

  • Vue

    • Vue 编码指南
    • vue-cli 启动本地服务局域网不能访问的原因分析
    • 解决 Vue 相同路由参数不同不会刷新的问题
    • 解决 vuex requires a Promise polyfill in this browser 问题
    • 关于父组件通过 v-on 接收子组件多个参数的一点研究
    • Vue $attrs 和 $listeners
    • Vue axios 发送 Form Data 数据格式请求
    • Vue 开发技巧
    • Vue 动态路由
    • Vue 集成 UEditor 富文本编辑器
    • Vue 修饰符
    • Vue 问题集合
    • Vue props 传多值的问题
    • vue-router 在 IE11 下手动更改 URL 的 hash 不会触发路由
    • vue-router 路由参数刷新消失的问题
    • 那些年被我们忽略的 vue 语法
    • vue 生命周期深入
    • vue 组件通信深入
    • vue 组件通信深入 Vuex
    • vue项目移动端、pc端适配方案
    • vuepress 如何引入 vuex
  • ElementUI

  • React

  • AntD

  • 前端
  • Vue
Henry
2018-04-22

解决 vuex requires a Promise polyfill in this browser 问题

造成这种现象的原因归根究底就是浏览器对 ES6 中的 promise 无法支持, 因此需要通过引入 babel-polyfill 来使我们的浏览器正常使用 es6 的功能

首先通过 npm 来安装:

npm i babel-polyfill -D

接下来就是根据场景来引入

目前本喵遇到的出现这种错误的场景有两种:

  1. 在使用 vue-cli 搭建的 unit 测试时( npm run unit ), 因为测试时启动的浏览器不是我们常用的 chrome , 而是 PhantomJs . 为了能让其像 chrome 一样正常运转, 需要在 kara.config.js 中设置其在启动我们程序的入口文件前, 先启动 polyfill.js , 配置部分如下:

    files: ['../../node_modules/babel-polyfill/dist/polyfill.js','./index.js'],

  2. 在 IE 下运行时,也会出现同样的报错,解决方式类似,不过这次是在 webpack.base.config.js 中配置:

    ps:这里在网上看到过三种配置方案:

    第一种:

    entry: {
      app: ["babel-polyfill", "./src/main.js"]
    }
    
    1
    2
    3

    第二种:

    entry: {
      app: "./src/main.js",
      "babel-polyfill": "babel-polyfill"
    }
    
    1
    2
    3
    4

    第三种: 在 main.js 中全局 import babel-polyfill

    不知是否本喵是个例,以上方法均扑街.

    最后使用直接引入 node_modules 中的 js 文件路径, 最终成功, 代码如下:

    entry: {
      app: ['./node_modules/babel-polyfill/dist/polyfill.js', './src/main.js']
    },
    
    1
    2
    3
编辑 (opens new window)
#Vue
上次更新: 5/27/2023, 1:02:05 PM
解决 Vue 相同路由参数不同不会刷新的问题
关于父组件通过 v-on 接收子组件多个参数的一点研究

← 解决 Vue 相同路由参数不同不会刷新的问题 关于父组件通过 v-on 接收子组件多个参数的一点研究→

最近更新
01
version 1.15
07-01
02
version 1.14
06-27
03
version 1.13
06-27
更多文章>
Theme by Vdoing | Copyright © 2017-2023 HenryTSZ | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式