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

目录
  • 一、错误描述
  • 二、错误日志
    • 1、日志内容:
    • 2、错误原因
    • 3、解决方法[可以使用的方法]
    • 4、解决办法[存在问题,需要研究还]
  • 总结

一、错误描述

因前端项目做的少,今天用 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错误内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 利用Matlab复刻羊了个羊小游戏

    目录 效果 完整代码 今天就是国赛的第一天 直接开摆 打国赛不如玩羊了个羊 玩羊了个羊不如玩MATLAB版 写作不易留个赞叭(比赛之余放松一下也行,反正MATLAB版我设置的是可以无限刷新...早晚能赢) 效果 完整代码 看效果就知道肯定用来相关素材包,因此只有代码无法运行,需要m文件所在文件夹存在羊了个羊素材包material.mat,素材包放在文末: function sheeeppp % @author : slandarer % gzh : slandarer随笔 clc;clear m

  • 多个vue项目实现共用一个node-modules文件夹

    多个vue项目共用一个node-modules文件夹 问题背景 一个目录下有多个vue项目. >> root     -- my-vueproject-a         -- package.json         -- node-modules     -- my-vueproject-b         -- package.json         -- node-modules ... 期望结果 将所有vue项目中的依赖包提取为一个 >> root     -- my-

  • 羊了个羊通关脚本Vue node实现版本

    目录 vue-sheep 特性 使用 预览截图 vue-sheep 本项目使用 vue2 + nodejs实现羊了个羊快速通关,仅为学习使用,请勿使用本程序恶意对游戏服务器持续造成压力,一切后果自负!!!t 参数包含个人信息,任何情况请勿泄漏 工具推荐: Fiddler/HTTPDebugger/Charles[PC].HttpCarry[Android].Stream[iphone] github地址 vue-sheep 特性 支持在线填写抓包参数 支持随机生成时间和自定义时间 最大支持10次

  • 羊了个羊破解方法(嘎嘎猛已入羊群n次)

    可无限刷新道具 直至通关 嘿嘿 已入羊群 1.pc端微信换成提供的旧版本 2.微信->设置->文件管理->打开文件夹->返回上一级打开WeChat Files目录下的Applet,打开进入其中的wx141bfb9b73c970a9文件夹,里面会有个数字文件夹,把里面的文件用提供的__WITHOUT_MULTI_PLUGINCODE__替换掉即可. !!!经本人测试找到的未修复的bug: 一旦通关一次后,后续入羊群不再需要循环浪费时间淦帝,只需要点换装点击新皮肤,点确定即可嘎嘎增加入

  • 教你给《羊了个羊》配置一套智能客服系统

    目录 ▲ <羊了个羊>游戏界面 ▲<羊了个羊>官方微博通告 几乎是一夜之间,微信小游戏<羊了个羊>火了.​ 这个依靠寻找相同元素消除方块的小游戏,凭借其“变态级别”的游戏难度成功破圈,闯入了无数人的休闲时间,并数次冲上热搜. 当然,很多人在微博.朋友圈对它的评价主要是:连第一关都过不了! ▲ <羊了个羊>游戏界面 对于这样一个规模不大的小游戏开发团队来说,收获超高人气的同时,头疼的事情发生了: ▲<羊了个羊>官方微博通告 是的,突然涌入的大量玩家

  • JS实现羊了个羊小游戏实例

    目录 引言 rem布局方案 popbox.js使用原理 html代码 样式代码 javascript代码 导入图片素材列表 startHandler函数实现 randomList 工具方法 clickHandler函数内部 createShadow方法 startHandler后续的逻辑 引言 这两天火爆全场的<羊了个羊>游戏,相信大家都玩过了,那么在玩这个游戏的同时,我想大家都会好奇这个游戏的实现,本文就带大家使用css,html,js来实现一个动物版的游戏. 首先我用到了2个插件,第一个插

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

    目录 一.错误描述 二.错误日志 1.日志内容: 2.错误原因 3.解决方法[可以使用的方法] 4.解决办法[存在问题,需要研究还] 总结 一.错误描述 因前端项目做的少,今天用 vue脚手架创建项目选择了 @vue/cli 5.0 版本,在编译项目时出现如下错误: 二.错误日志 1.日志内容: 错误1: error  in ./node_modules/jwa/index.js Module not found: Error: Can't resolve 'crypto' in 'H:\iWo

  • 解决vue cli4升级sass-loader(v8)后报错问题

    sass-loader报错: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schem a.  - options has an unknown propert

  • Vue 数组和对象更新,但是页面没有刷新的解决方式

    在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. <ul> <li v-for="(item,index) in todos" :key="index">{{item.name}}</li> </ul> data () { return { msg: 'Welcome to Your Vue.js App', todos: [{ name: 'aa', age: 14 }, { nam

  • vue使用prop可以渲染但是打印台报错的解决方式

    vue属性传递时有时会报下述错误 vue.esm.js?f959:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'RegistrationAuthority' of undefined" found in ---> <DialogHistory> at src/components/tools/dialog_history.vue <NurseInfor> at src/

  • 防止Node.js中错误导致进程阻塞的办法

    前言 在Node.js中,当某个回调函数发生了错误,整个进程都会崩溃,影响后面的代码执行. Node.js这样处理,是因为在发生未被捕获的错误时,进程的状态就不确定.之后也就无法正常工作了.如果错误始终不处理的话,就回一直抛出意料之外的错误,这样不利于调试. 防止错误导致的进程阻塞的方法主要有如下两种: 一. try-catch try-catch允许进行异常捕获,并让代码继续执行下去: 例如: 当函数抛出错误时,代码就停止执行了: (function() { var a = 0; a(); c

  • Vue 中 a标签上href无法跳转的解决方式

    问题: 使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常. 解决: 在App.vue 里增加判断IE浏览器手动修复-- export default { name: 'App', mounted(){ function checkIE(){ return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.s

  • vue中提示$index is not defined错误的解决方式

    今天学习Vue中遇到了一个报错信息:$index is not defined,是我写了个for循环在HTML中,然后是因为版本的问题 下面是解决方法: 原来的是 v-for="person in items" v-on:click="deletePerson($index)"//这个仅仅适用于1.0版本,不要采坑了同学们 这个在Vue1.0版本中式适用的可以直接使用$index,但是在2.0是不适合的 在Vue 2.0版本中获取索引我们需要通过 v-for = &

  • Node.js基础入门之使用方式及模块化详解

    目录 什么是Node.js ? Node.js下载 Node.js和JavaScript的区别 Node.js安装与验证 Node.js使用方式 1. REPL模式 2. 文件模式 Node.js模块化 1. 什么是模块? 2. 模块分类 3. 创建自定义模块 4. 调用自定义模块 5. 模块测试 6. 主模块 7. 模块组成 在这个竞争日益激烈的今天,已经不是一门语言,一项技术走天下的时代了.正所谓艺多不压身,今天开始学习Node.js,学而时习之,不亦乐乎,希望可以借鉴经验,学以致用,如有不

  • vue项目打包发布后接口报405错误的解决

    目录 vue项目打包发布后接口报405 vue项目打包之后接口出现错误问题 错误信息 关键代码 解决方式 vue项目打包发布后接口报405 vue项目前端做了代理打包后后台不识别报405 not allowed vue.config.js文件配置   devServer: {     // host: "0.0.0.0", //项目运行时的本地地址     // port: 8880, // 端口号     //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为

  • Node.js插件的正确编写方式

    Node.js在利用JavaScript编写后端方面效果拔群,值得我们多加尝试.不过如果大家需要一些无法直接使用的功能甚至是根本无从实现的模块使用,那么能否从C/C++库当中引入此类成果呢?答案是肯定的,大家要做的就是编写一款插件,并借此在自己的JavaScript代码中使用其它代码库的资源.下面我们就一同开始今天的探询之旅. 介绍 正如Node.js在官方说明文档中所言,插件是以动态方式进行链接的共享式对象,能够将JavaScript代码与C/C++库接驳起来.这意味着我们可以引用任何来自C/

随机推荐