vuejs2 webpack项目运行npm run serve提示文件大于2GB报错如何解决

这个2GB文件大小限制错误由webpack-dev-server依赖的静态资源服务模块send触发，该模块默认设置了最高2GB的单文件传输阈值。Vue2项目通常把静态资源存放在public目录，启动npm run serve时devServer会自动加载该目录下的所有文件做静态服务，超过阈值的视频文件就会触发该报错。

方案1（推荐）：独立存放大体积视频，脱离webpack构建链路 #

• 在项目根目录新建独立的大资源存放目录，例如local-large-assets，不要放在public/或src/assets/目录下，避免被webpack的监听、拷贝、构建逻辑处理
• 修改项目根目录下的vue.config.js配置，映射该目录为devServer的静态资源目录，同时关闭文件大小限制：

const path = require('path')

module.exports = {
  devServer: {
    // webpack-dev-server v3 版本配置（vue-cli 4.x及以下默认使用该版本）
    contentBase: [
      path.join(__dirname, 'public'),
      path.join(__dirname, 'local-large-assets')
    ],
    staticOptions: {
      maxSize: Infinity // 关闭send模块的文件大小限制
    },
    // webpack-dev-server v4 版本配置请使用以下内容替换上面的contentBase和staticOptions
    /*
    static: [
      { directory: path.join(__dirname, 'public') },
      { 
        directory: path.join(__dirname, 'local-large-assets'),
        staticOptions: { maxSize: Infinity }
      }
    ]
    */
  },
  // 关闭webpack默认的性能体积提示，避免后续打包报警
  configureWebpack: {
    performance: {
      hints: false,
      maxEntrypointSize: Infinity,
      maxAssetSize: Infinity
    }
  }
}

配置完成后重启npm run serve，大体积视频可以通过/你的视频文件名.mp4的路径正常访问。

方案2：必须存放在public目录的处理方式 #

如果必须把大视频放在public目录下，需要修改默认的copy-webpack-plugin配置，过滤大体积视频文件避免触发拷贝校验：

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    // 移除vue-cli默认的copy-webpack-plugin规则
    config.plugins.delete('copy')
  },
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, 'public'),
          to: path.resolve(__dirname, 'dist'),
          // 过滤大体积视频格式，不参与拷贝构建
          ignore: ['**/*.mp4', '**/*.mov', '**/*.mkv']
        }
      ])
    ]
  }
}

本配置仅适用于本地kiosk这类离线终端场景，公网项目不建议使用大体积静态资源，避免影响加载性能。

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