在Nuxt应用中为Safari加载.mov格式视频的loader配置问题

你遇到的报错是因为Webpack默认的资源处理规则未覆盖.mov后缀的二进制文件，按以下配置即可解决：

前置注意点 #

.mov格式对应的正确MIME类型为video/quicktime，请先修改你的video标签代码：

<video>
  <!-- Safari -->
  <source src="~/assets/videos/video.mov" type="video/quicktime" />
  <!-- 其他浏览器 -->
  <source src="~/assets/videos/video.webm" type="video/webm" />
</video>

方案1：修改Webpack配置适配assets目录的mov文件 #

Nuxt 2 配置 #

1. 先安装依赖：

npm install file-loader --save-dev

2. 编辑项目根目录的nuxt.config.js：

export default {
  build: {
    extend(config) {
      // 新增.mov格式的处理规则
      config.module.rules.push({
        test: /\.(mov)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:7].[ext]',
              outputPath: 'assets/videos/',
              esModule: false
            }
          }
        ]
      })
    }
  }
}

Nuxt 3（Webpack构建模式）配置 #

编辑项目根目录的nuxt.config.ts：

export default defineNuxtConfig({
  webpack: {
    extend(config) {
      config.module.rules.push({
        test: /\.(mov)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/videos/[name].[hash:7][ext]'
        }
      })
    }
  }
})

方案2：免配置方案 #

无需修改Webpack配置，直接将mov文件放到项目根目录的静态资源文件夹即可：

• Nuxt 2 放到static/videos/目录，引用路径写/videos/video.mov
• Nuxt 3 放到public/videos/目录，引用路径写/videos/video.mov

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