vue3 webpack5 vue.config.js 配置频繁报错

复制代码
Compiled with problems:
×
ERROR in ./node_modules/agent-base/dist/helpers.js 39:26-41
Module not found: Error: Can't resolve 'http' in '/node_modules/agent-base/dist'

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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }
ERROR in ./node_modules/agent-base/dist/helpers.js 40:27-43
Module not found: Error: Can't resolve 'https' in '/node_modules/agent-base/dist'

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: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "https": false }
ERROR in ./node_modules/agent-base/dist/index.js 44:25-39
Module not found: Error: Can't resolve 'net' in '/node_modules/agent-base/dist'
ERROR in ./node_modules/agent-base/dist/index.js 45:26-41
Module not found: Error: Can't resolve 'http' in '/node_modules/agent-base/dist'

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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }
ERROR in ./node_modules/agent-base/dist/index.js 46:16-32
Module not found: Error: Can't resolve 'https' in '/node_modules/agent-base/dist'

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: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "https": false }
ERROR in ./node_modules/http-proxy-agent/dist/index.js 43:25-39
Module not found: Error: Can't resolve 'net' in '/node_modules/http-proxy-agent/dist'
ERROR in ./node_modules/http-proxy-agent/dist/index.js 44:25-39
Module not found: Error: Can't resolve 'tls' in '/node_modules/http-proxy-agent/dist'
ERROR in ./node_modules/https-proxy-agent/dist/index.js 44:25-39
Module not found: Error: Can't resolve 'net' in '/node_modules/https-proxy-agent/dist'
ERROR in ./node_modules/https-proxy-agent/dist/index.js 45:25-39
Module not found: Error: Can't resolve 'tls' in '/node_modules/https-proxy-agent/dist'
ERROR in ./node_modules/jsdom/lib/api.js 6:13-28
Module not found: Error: Can't resolve 'path' in '/node_modules/jsdom/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: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
ERROR in ./node_modules/jsdom/lib/api.js 7:11-33
Module not found: Error: Can't resolve 'fs' in '/node_modules/jsdom/lib'
ERROR in ./node_modules/jsdom/lib/api.js 8:11-24
Module not found: Error: Can't resolve 'vm' in '/node_modules/jsdom/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: { "vm": require.resolve("vm-browserify") }'
    - install 'vm-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "vm": false }
ERROR in ./node_modules/jsdom/lib/jsdom/browser/Window.js 13:11-24
Module not found: Error: Can't resolve 'vm' in '/node_modules/jsdom/lib/jsdom/browser'

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: { "vm": require.resolve("vm-browserify") }'
    - install 'vm-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "vm": false }
ERROR in ./node_modules/jsdom/lib/jsdom/browser/resources/resource-loader.js 4:11-24
Module not found: Error: Can't resolve 'fs' in '/node_modules/jsdom/lib/jsdom/browser/resources'
ERROR in ./node_modules/jsdom/lib/jsdom/living/crypto/Crypto-impl.js 4:19-36
Module not found: Error: Can't resolve 'crypto' in '/node_modules/jsdom/lib/jsdom/living/crypto'

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 }
ERROR in ./node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js 3:13-28
Module not found: Error: Can't resolve 'http' in '/node_modules/jsdom/lib/jsdom/living/helpers'

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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }
ERROR in ./node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js 4:14-30
Module not found: Error: Can't resolve 'https' in '/node_modules/jsdom/lib/jsdom/living/helpers'

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: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "https": false }
ERROR in ./node_modules/jsdom/lib/jsdom/living/helpers/http-request.js 9:13-28
Module not found: Error: Can't resolve 'http' in '/node_modules/jsdom/lib/jsdom/living/helpers'

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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }
ERROR in ./node_modules/jsdom/lib/jsdom/living/helpers/http-request.js 10:14-30
Module not found: Error: Can't resolve 'https' in '/node_modules/jsdom/lib/jsdom/living/helpers'

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: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "https": false }
ERROR in ./node_modules/jsdom/lib/jsdom/living/helpers/http-request.js 13:4-21
Module not found: Error: Can't resolve 'stream' in '/node_modules/jsdom/lib/jsdom/living/helpers'

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 }
ERROR in ./node_modules/jsdom/lib/jsdom/living/helpers/http-request.js 14:13-28
Module not found: Error: Can't resolve 'zlib' in '/node_modules/jsdom/lib/jsdom/living/helpers'

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: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }
ERROR in ./node_modules/jsdom/lib/jsdom/living/navigator/NavigatorConcurrentHardware-impl.js 3:11-24
Module not found: Error: Can't resolve 'os' in '/node_modules/jsdom/lib/jsdom/living/navigator'

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: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }
ERROR in ./node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js 11:11-24
Module not found: Error: Can't resolve 'vm' in '/node_modules/jsdom/lib/jsdom/living/nodes'

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: { "vm": require.resolve("vm-browserify") }'
    - install 'vm-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "vm": false }
ERROR in ./node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js 21:26-54
Module not found: Error: Can't resolve 'http' in '/node_modules/jsdom/lib/jsdom/living/xhr'

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: { "http": require.resolve("stream-http") }'
    - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "http": false }
ERROR in ./node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js 24:4-28
Module not found: Error: Can't resolve 'child_process' in '/node_modules/jsdom/lib/jsdom/living/xhr'
ERROR in ./node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js 13:11-24
Module not found: Error: Can't resolve 'fs' in '/node_modules/jsdom/lib/jsdom/living/xhr'
ERROR in ./node_modules/@asamuzakjp/css-color/node_modules/lru-cache/dist/commonjs/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /node_modules/@asamuzakjp/css-color/node_modules/lru-cache/dist/commonjs/index.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
  421 |         return this.#keyMap.has(key) ? Infinity : 0;
  422 |     }
> 423 |     #initializeTTLTracking() {
      |     ^
  424 |         const ttls = new ZeroArray(this.#max);
  425 |         const starts = new ZeroArray(this.#max);
  426 |         this.#ttls = ttls;
    at File.buildCodeFrameError (/node_modules/@babel/core/lib/transformation/file/file.js:193:12)
    at NodePath.buildCodeFrameError (/node_modules/@babel/traverse/lib/path/index.js:117:21)
    at shouldTransform (/node_modules/@babel/helper-create-class-features-plugin/lib/features.js:130:29)
    at PluginPass.Class (/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:112:44)
    at newFn (/node_modules/@babel/traverse/lib/visitors.js:172:14)
    at NodePath._call (/node_modules/@babel/traverse/lib/path/context.js:49:20)
    at NodePath.call (/node_modules/@babel/traverse/lib/path/context.js:39:18)
    at NodePath.visit (/node_modules/@babel/traverse/lib/path/context.js:88:31)
    at TraversalContext.visitQueue (/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitMultiple (/node_modules/@babel/traverse/lib/context.js:62:17)
    at TraversalContext.visit (/node_modules/@babel/traverse/lib/context.js:111:19)
    at traverseNode (/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/node_modules/@babel/traverse/lib/path/context.js:94:52)
    at TraversalContext.visitQueue (/node_modules/@babel/traverse/lib/context.js:90:16)
    at TraversalContext.visitSingle (/node_modules/@babel/traverse/lib/context.js:66:19)
    at TraversalContext.visit (/node_modules/@babel/traverse/lib/context.js:113:19)
    at traverseNode (/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (/node_modules/@babel/traverse/lib/index.js:53:34)
    at transformFile (/node_modules/@babel/core/lib/transformation/index.js:80:31)
    at transformFile.next (<anonymous>)
    at run (/node_modules/@babel/core/lib/transformation/index.js:25:12)
    at run.next (<anonymous>)
    at transform (/node_modules/@babel/core/lib/transform.js:22:33)
    at transform.next (<anonymous>)
    at step (/node_modules/gensync/index.js:261:32)
    at /node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/node_modules/gensync/index.js:223:11)
ERROR in ./node_modules/axios/lib/utils.js 14:0-28
Module not found: Error: Can't resolve 'crypto' in '/node_modules/axios/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: { "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 }
复制代码

 

 

解决办法： 删除node_modules 文件夹和package-lock.json 文件，  输入npm install

 

 

 

vue.config.js 配置如下

复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // configureWebpack: {
  //   resolve: {
  //       fallback: {
            // crypto:  require.resolve('crypto-browserify'),
            // // http: require.resolve("stream-http") },
            // // https: require.resolve("https-browserify")
            // http: false,
            // https: false 
                // "path": false ,


            // 'crypto': require.resolve('crypto-browserify'),
            //     'stream': require.resolve('stream-browserify'),
            //     'assert': require.resolve('assert'),
            //     'http': require.resolve('stream-http'),
            //     'https': require.resolve('https-browserify'),
            //     'os': require.resolve('os-browserify/browser'),
            //     'zlib': require.resolve('browserify-zlib'),
            //     'vm': require.resolve("vm-browserify"),
            //     'net': require.resolve('stream-http'),
            //     'path': require.resolve('path-browserify')
  //       }
  //   }
  // },
  // resolve: {
  //   fallback: {
  //     crypto: require.resolve('crypto-browserify')
  //   }
  // }
  outputDir: process.env.VUE_APP_DIST, // 打包后文件的目录
  publicPath: './', // 静态资源路径（默认/，打包后会白屏）
  assetsDir: 'static', //outputDir的静态资源(js、css、img、fonts)目录
  // 开发服务器配置
  devServer: {
    // 自动打开浏览器
    open: true,
    // 端口号
    port: 8080,
    // 允许跨域请求
    proxy: {
        '/api': {
            // 代理的目标地址
            target: 'http://your-api-server.com',
            // 是否改变请求头中的 host
            changeOrigin: true,
            // 路径重写
            pathRewrite: {
                '^/api': ''
            }
        }
    }
  }
})
复制代码

 

posted @   ☆♂安♀★  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
·  vue3 url不包含#
·  idea打包jar到nexus私服仓库
·  关于vue运行报错：webpack ＜ 5 used to include polyfills for node.js core modules by default.
·  webpack5学习
·  vue.config.js --- vue-cli 4.0配置
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示