@vue/cli4升级@vue/cli5 node.js polyfills错误的解决方式

 更新时间:2022年09月05日 10:58:41   作者:XBodhi.  
最近在升级vue/cli的具有了一些问题,解决问题的过程也花费了些时间,所以下面这篇文章主要给大家介绍了关于@vue/cli4升级@vue/cli5 node.js polyfills错误的解决方式,需要的朋友可以参考下

一、错误描述

因前端项目做的少,今天用 vue脚手架创建项目选择了 @vue/cli 5.0 版本,在编译项目时出现如下错误:

二、错误日志

1、日志内容:

错误1:
 
error  in ./node_modules/jwa/index.js
 
Module not found: Error: Can't resolve 'crypto' in 'H:\iWork\产品代码\前端代码\ui_2\node_modules\jwa'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
 
错误2:
 
error  in ./node_modules/jwa/index.js
 
Module not found: Error: Can't resolve 'util' in 'H:\iWork\产品代码\前端代码\ui_2\node_modules\jwa'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }
 
错误3:
 
error  in ./node_modules/jws/lib/data-stream.js
 
Module not found: Error: Can't resolve 'stream' in 'H:\iWork\产品代码\前端代码\ui_2\node_modules\jws\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

2、错误原因

因为 @vue/cli 从 4.0 升级到 5.0 已经不默认包含 node.js 的核心 polyfills 组件了。项目的 package.json 的版本如下图:

3、解决方法[可以使用的方法]

参考资料:

        中文Webpack相关介绍:解析(Resolve) | webpack 中文文档

        node-polyfill-webpack-plugin 只能在 Webpack 5+ 版本使用,相关介绍:Package - node-polyfill-webpack-plugin (npmmirror.com)

1.执行安装命令:npm install node-polyfill-webpack-plugin

2.进行配置 vue.config.js

在顶行添加如下:const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
在 defineConfig 中添加节点如下:
configureWebpack: {
    resolve: {
      alias: {},
      fallback: {
        //其他的如果不启用可以用 keyname :false,例如:crypto:false, 
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify")
      },
    },
    plugins: [new NodePolyfillPlugin()]
  }
 
特殊说明:fallback 内的配置好像并未生效,不过还是推荐您写上你缺失的组件名。

如下图:

4、解决办法[存在问题,需要研究还]

通过对日志的分析因为有其他组件引用到了 polyfills 的核心组件并没有安装,所以报错了,这里需要执行 npm install 命令进行包安装即可。

命令:

npm install util stream-browserify crypto-browserify 

包安装完成后 package.json 如下图: 

总结

到此这篇关于@vue/cli4升级@vue/cli5 node.js polyfills错误解决的文章就介绍到这了,更多相关@vue/cli4升级@vue/cli5错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中常用rules校验规则(实例代码)

    Vue中常用rules校验规则(实例代码)

    这篇文章主要介绍了Vue中常用rules校验规则,本文通过实例代码个大家介绍了一些校验方法,需要的朋友可以参考下
    2019-11-11
  • vue实现前端列表拖拽功能

    vue实现前端列表拖拽功能

    这篇文章主要为大家详细介绍了如何利用vue实现前端列表拖拽功能,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
    2023-12-12
  • vue基础ESLint Prettier配置教程详解

    vue基础ESLint Prettier配置教程详解

    这篇文章主要介绍了vue基础ESLint Prettier配置教程详解,本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue
    2022-07-07
  • 学习笔记之Vuex的用法总结(Vue状态管理)

    学习笔记之Vuex的用法总结(Vue状态管理)

    这篇文章主要介绍了学习笔记之Vuex的用法总结(Vue状态管理),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue Ajax跨域请求实例详解

    Vue Ajax跨域请求实例详解

    这篇文章主要介绍了Vue Ajax跨域请求实例详解,需要的朋友可以参考下
    2017-06-06
  • vue在自定义组件上使用v-model和.sync的方法实例

    vue在自定义组件上使用v-model和.sync的方法实例

    自定义组件的v-model和.sync修饰符其实本质上都是vue的语法糖,用于实现父子组件的"数据"双向绑定,下面这篇文章主要给大家介绍了关于vue在自定义组件上使用v-model和.sync的相关资料,需要的朋友可以参考下
    2022-07-07
  • vue中使用elementUI组件手动上传图片功能

    vue中使用elementUI组件手动上传图片功能

    Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下
    2019-12-12
  • VeeValidate 的使用场景以及配置详解

    VeeValidate 的使用场景以及配置详解

    这篇文章主要介绍了VeeValidate 的使用场景以及配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vuex 中辅助函数mapGetters的基本用法详解

    vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性,在组件或界面中不使用mapGetter调用映射vuex中的getter,在组件或界面中使用mapGetter调用映射vuex中的getter,具体内容跟随小编一起通过本文学习吧 
    2021-07-07
  • vue.js实现只弹一次弹框

    vue.js实现只弹一次弹框

    本篇文章通过代码实例给大家详细讲述了一个vue的实例,实现只弹一次弹框功能,一起学习分享下。
    2018-01-01

最新评论