Nuxt 2中使用require引入视频资源触发lstat函数不存在报错

问题根源 #

Nuxt 2对Webpack 5的兼容存在细节冲突，你之前配置的file-loader和Webpack 5内置的Asset Modules资源处理机制冲突，导致输出文件系统的方法调用异常，即使全新项目也会触发这个问题。

解决方案 #

1. 替换file-loader为Webpack 5原生Asset Modules

Webpack 5已经内置了资源处理能力，无需再安装file-loader，直接用原生规则配置即可：
修改nuxt.config.js的webpack配置：

export default {
  webpack5: true,
  webpack: {
    module: {
      rules: [
        {
          test: /\.(mp4|webm|ogg)$/,
          type: 'asset/resource',
          generator: {
            filename: 'videos/[name].[hash][ext]' // 自定义输出路径和文件名规则
          }
        }
      ]
    }
  }
}

2. 调整视频资源的引用方式

• 在<video>标签中直接引用：不用require，直接用相对路径（支持@别名）

<video src="@/assets/videos/your-video.mp4" controls></video>

• 在JS中动态加载：用import()替代require()（异步加载更适配Webpack 5的模块处理）

async createVideo() {
  const videoAsset = await import('@/assets/videos/your-video.mp4')
  const videoEl = document.createElement('video')
  videoEl.src = videoAsset.default
  // 后续操作...
}

3. 清理缓存并重启项目

删除项目根目录下的.nuxt文件夹、node_modules和package-lock.json（或yarn.lock），然后重新安装依赖并启动服务：

rm -rf .nuxt node_modules package-lock.json
npm install
npm run dev

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