問題截圖:
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: { "process": require.resolve("process/browser") }'
- install 'process'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "process": false }
@ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368
@ ./src/App.vue 2:0-54 3:0-49 3:0-49 6:49-55
@ ./src/main.js 4:0-28 6:22-25
webpack compiled with 1 error
問題描述:
查了很多資料發(fā)現(xiàn)是因為webpack版本引起的,在webpack5中移除了nodejs核心模塊的polyfill自動引入,具體可查看這篇文章
https://wenku.baidu.com/view/7b8427ebd938376baf1ffc4ffe4733687f21fc5d.html
通過對日志的分析因為有其他組件引用到了 polyfills 的核心組件并沒有安裝,所以報錯了,這里需要執(zhí)行 npm install 命令進行包安裝即可。
原因是由于在webpack5中移除了nodejs核心模塊的polyfill自動引入,所以需要手動引入
解決方案:
1、運行下面這行指令,安裝在 Webpack 中 Polyfill Node.js 核心模塊。
npm install node-polyfill-webpack-plugin
?2、在vue.config.json中添加(本文作者沒有用到這一步,用第一步命令安裝后就可以運行)
//頭部引用
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
//加入
configureWebpack: {
plugins: [new NodePolyfillPlugin()]
}
?完整vue.config.json文件如下:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = defineConfig({
configureWebpack: {
plugins: [new NodePolyfillPlugin()]
}
})
參考文章:?
因webpack版本引起的系列報錯問題
https://blog.csdn.net/qq_49490164/article/details/125183845
@vue/cli 4 升級 @vue/cli 5 node.js polyfills 錯誤
https://blog.csdn.net/qiaohuyue/article/details/124885563文章來源:http://www.zghlxwxcb.cn/news/detail-437489.html
安裝命令介紹:
https://www.npmjs.com/package/node-polyfill-webpack-plugin文章來源地址http://www.zghlxwxcb.cn/news/detail-437489.html
到了這里,關(guān)于【已解決】VUE3+webpack >5報錯問題的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!