关于Vue项目报错:Object.entries is not a function

事情是这样的,今天同事跟我说我负责维护的那个项目报错了,我顿时就懵了,因为之前一直都好好的,怎么就突然报错了?吓得我赶紧把项目打开运行起来,但是,我这里没有报错啊,就离谱

报错截图
在这里插入图片描述

全局搜索了一下,整个项目我压根没用过 Object.entries 这个方法,它是从哪冒出来的呀???
网上查了这个方法,这个方法谷歌最低54版本才支持,但是同事他们用的是49版本的,不报错就见鬼了,到此,可以判断报这个错多半是因为浏览器兼容问题。
原因找到了,那就好办了。按照这个逻辑,我进行了babel配置,用的是@babel/plugin-transform-runtime这个插件。配完了之后还是不行。最后还是老老实实的使用babel/polyfill来解决的

配置步骤

1.下载安装 babel-polyfillcore-js 这两个插件

npm install babel-polyfill core-js -s

2.配置 babel.config.js 文件,如果没有这个文件就在项目的根目录下创建

module.exports = {
  presets: [
    [
      "@vue/app",
    ],
  ],
};

3.在 vue.config.js 配置文件中添加这两个属性,同理,如果没有这个文件就在项目根目录下创建
在这里插入图片描述
代码

module.exports = {
  transpileDependencies: process.env.NODE_ENV === "development" ? ["*"] : [],
  configureWebpack: (config) => {
    config.entry.app = ["babel-polyfill", "./src/main.js"];
  },
}

4.最后一步,在主入口文件 main.js 中引入 babel-polyfill 插件

import 'babel-polyfill'

完结,撒花 ,嘻嘻

Logo

前往低代码交流专区

更多推荐