部署Vue.js图片处理本地应用时遇Webpack fallback报错求助

我正在学习编程，开发了一款用于捕获、调整尺寸、分类图片并保存到Google Drive对应文件夹的Web应用，后续将用于AI图像识别模型训练。目前尝试本地部署以便用手机测试，但无论如何操作都会触发相同的fallback错误。已多次更新webpack.config.js并安装必要的polyfill依赖，问题仍未解决。

当前webpack.config.js配置 #

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  resolve: {
    fallback: {
      "os": require.resolve("os-browserify/browser"),
      "path": require.resolve("path-browserify"),
      "querystring": require.resolve("querystring-es3"),
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "url": require.resolve("url/"),
      "zlib": require.resolve("browserify-zlib"),
      "process": require.resolve("process/browser"),
      "fs": false,
      "child_process": false,
      "net": false,
      "tls": require.resolve('tls-browserify'),
      "zlib": require.resolve("browserify-zlib"),
      "https": require.resolve("https-browserify"),
      "http2": require.resolve('http2'),
      "assert": require.resolve("assert/")
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]
};

排查与解决步骤 #

1. 清理重复配置并校验依赖安装 #

resolve.fallback中重复配置了zlib，先删除其中一项。再确认所有polyfill依赖都已正确安装，执行以下命令：

npm install os-browserify path-browserify querystring-es3 crypto-browserify stream-browserify url browserify-zlib process tls-browserify https-browserify http2 assert buffer --save-dev

2. 替换过时的Webpack插件 #

你使用的UglifyJsPlugin和LoaderOptionsPlugin在Webpack 4及以上版本已被弃用，建议替换为terser-webpack-plugin并调整优化配置：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...保留其他原有配置
  devtool: 'source-map', // 生产环境建议使用source-map而非eval-source-map
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    // 注入全局process和Buffer变量，解决polyfill全局依赖问题
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ],
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        terserOptions: {
          compress: {
            warnings: false
          }
        }
      })
    ]
  }
};

3. 检查Google Drive相关依赖的浏览器兼容性 #

如果你的应用使用了googleapis这类Node.js端库，它们依赖大量Node.js核心模块，即使添加polyfill也可能无法在浏览器中正常运行。建议改用Google Drive的前端OAuth2 + REST API实现文件上传，避免依赖Node.js专属模块。

4. 调整DevServer允许手机访问 #

确保本地开发服务器允许外部设备访问，修改devServer配置：

devServer: {
  historyApiFallback: true,
  noInfo: true,
  overlay: true,
  host: '0.0.0.0', // 允许所有IP访问
  port: 8080,
  allowedHosts: 'all' // 允许任意域名访问
}

配置完成后，在手机浏览器中输入你的电脑局域网IP（如http://192.168.1.100:8080）即可访问测试。

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