亲宝软件园·资讯

展开

@vue/cli4升级@vue/cli5错误

XBodhi. 人气:0

一、错误描述

因前端项目做的少,今天用 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 如下图: 

总结

加载全部内容

相关教程
猜你喜欢
用户评论