Vue项目报错:Object.entries is not a function
vue配置babel解决浏览器兼容问题
·
关于Vue项目报错:Object.entries is not a function
事情是这样的,今天同事跟我说我负责维护的那个项目报错了,我顿时就懵了,因为之前一直都好好的,怎么就突然报错了?吓得我赶紧把项目打开运行起来,但是,我这里没有报错啊,就离谱
报错截图
全局搜索了一下,整个项目我压根没用过 Object.entries 这个方法,它是从哪冒出来的呀???
网上查了这个方法,这个方法谷歌最低54版本才支持,但是同事他们用的是49版本的,不报错就见鬼了,到此,可以判断报这个错多半是因为浏览器兼容问题。
原因找到了,那就好办了。按照这个逻辑,我进行了babel配置,用的是@babel/plugin-transform-runtime这个插件。配完了之后还是不行。最后还是老老实实的使用babel/polyfill来解决的
配置步骤
1.下载安装 babel-polyfill 和 core-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'
完结,撒花 ,嘻嘻
更多推荐
已为社区贡献1条内容
所有评论(0)