Vue项目引入.mov视频编译失败，配置file-loader后仍报错如何解决？

解决方案 #

方法1：修正vue.config.js配置

你之前的配置不符合Vue CLI的配置规范，原生webpack的module规则需要放在configureWebpack字段下才能生效，修改vue.config.js为以下内容：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        { test: /\.mov$/, use: 'file-loader' }
      ]
    }
  }
}

修改后重启项目即可生效。

方法2：免loader方案（更简单）

你可以直接把.mov视频文件放到项目根目录的public文件夹下，比如存放在public/assets/01/output2.mov，然后修改video标签的src为绝对路径，不需要经过webpack打包，自然不需要loader：

<video
       id="myvideo"
       autoplay
       muted
       loop
       playsinline
     >
       <source src="/assets/01/output2.mov" type="video/quicktime" />
     </video>

这个方案不需要修改任何配置，兼容性更好。

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