一、錯誤描述

因前端項目做的少，今天用 vue腳手架創(chuàng)建項目選擇了 @vue/cli 5.0 版本，在編譯項目時出現(xiàn)如下錯誤：

二、錯誤日志

1、日志內(nèi)容：

錯誤1：
 
error  in ./node_modules/jwa/index.js
 
Module not found: Error: Can't resolve 'crypto' in 'H:\iWork\產(chǎn)品代碼\前端代碼\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\產(chǎn)品代碼\前端代碼\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\產(chǎn)品代碼\前端代碼\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 已經(jīng)不默認包含 node.js 的核心 polyfills 組件了。項目的 package.json 的版本如下圖：

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

參考資料：

        中文Webpack相關(guān)介紹：解析(Resolve) | webpack 中文文檔

        node-polyfill-webpack-plugin 只能在 Webpack 5+ 版本使用，相關(guān)介紹：Package - node-polyfill-webpack-plugin (npmmirror.com)

1.執(zhí)行安裝命令：npm install node-polyfill-webpack-plugin

2.進行配置 vue.config.js

在頂行添加如下：const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
在 defineConfig 中添加節(jié)點如下：
configureWebpack: {
    resolve: {
      alias: {},
      fallback: {
        //其他的如果不啟用可以用 keyname :false，例如：crypto:false, 
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify")
      },
    },
    plugins: [new NodePolyfillPlugin()]
  }
 
特殊說明：fallback 內(nèi)的配置好像并未生效，不過還是推薦您寫上你缺失的組件名。

如下圖：

4、解決辦法[存在問題，需要研究還]

通過對日志的分析因為有其他組件引用到了 polyfills 的核心組件并沒有安裝，所以報錯了，這里需要執(zhí)行 npm install 命令進行包安裝即可。

命令：

npm install util stream-browserify crypto-browserify 

包安裝完成后 package.json 如下圖： 

總結(jié)

到此這篇關(guān)于@vue/cli4升級@vue/cli5 node.js polyfills錯誤解決的文章就介紹到這了,更多相關(guān)@vue/cli4升級@vue/cli5錯誤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論