Vue CLI 5项目中'http'模块解析失败及配置报错求助

问题原因 #

Vue CLI 5基于Webpack 5，Webpack 5不再默认polyfill Node.js核心模块（如http），所以旧代码中直接使用new http.Agent()会触发Module not found错误。另外，你用vue inspect > vue.config.js生成的配置文件无法直接使用，因为其中的TerserPlugin、VueLoaderPlugin等变量是Vue CLI内部定义的，在自定义配置文件中未声明，导致ReferenceError。

简易解决方案 #

方案1：使用node-polyfill-webpack-plugin（推荐，一次性解决所有Node核心模块polyfill） #

这个插件会自动处理所有Node.js核心模块的polyfill，无需逐个配置：

1. 安装依赖：

npm install node-polyfill-webpack-plugin --save-dev

2. 在项目根目录创建或修改vue.config.js（不要用vue inspect生成的文件）：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin()
    ]
  }
}

方案2：单独polyfill http模块 #

如果只需要处理http模块，可手动配置Webpack的resolve fallback：

1. 安装对应的polyfill包：

npm install stream-http --save

2. 创建或修改vue.config.js：

module.exports = {
  configureWebpack: {
    resolve: {
      fallback: {
        "http": require.resolve("stream-http")
      }
    }
  }
}

注意事项 #

不要直接使用vue inspect输出的内容作为vue.config.js，该命令的输出是Webpack配置的调试片段，其中的插件变量未在全局定义，无法直接运行。正确的做法是通过Vue CLI提供的configureWebpack或chainWebpack接口修改配置，会自动与默认配置合并。

内容的提问来源于stack exchange，提问作者bigblacknight