VueJS 2本地开发视频播放报错：元素无可用源（未用require()）

针对你遇到的本地开发动态绑定视频src触发DOMException、用require导致构建过慢的问题，最优解决方法是借助Vue CLI的Public目录来管理视频资源：

1. 迁移视频目录到Public文件夹 #

将你的videos目录直接移动到项目根目录的public文件夹下（如果没有public文件夹就新建一个）。这样视频资源会被Vue CLI直接复制到构建后的根目录，且不会被Webpack解析打包，完美避开批量require导致的构建慢问题。

2. 修改模板中的路径绑定 #

将视频的动态src从相对路径改成基于根目录的绝对路径：

<video class="back_video" :src="`/videos/Space${videoIndex}.mp4`" id="background-video"></video>

3. 配置Git忽略视频文件 #

在项目根目录的.gitignore文件中添加一行，避免视频文件被提交到Git：

public/videos/

为什么这个方法有效？ #

• 本地开发时，Vue CLI的dev server会直接暴露public目录下的资源，浏览器通过/videos/xxx.mp4就能正确请求到视频，不会出现路径解析错误或跨域问题，自然不会触发DOMException。
• 部署到服务器时，public目录下的视频会被直接放到网站根目录，和你之前部署成功的路径逻辑一致，无需额外修改。
• 视频资源完全不经过Webpack处理，不会占用构建时间，也不会被打包到产物中。

可选方案：配置Dev Server访问外部视频目录 #

如果不想移动视频目录到public，可以在vue.config.js中配置dev server，允许访问项目外部的视频目录：

const path = require('path')

module.exports = {
  devServer: {
    static: {
      // 指定视频所在的目录路径
      directory: path.resolve(__dirname, './videos'),
      // 映射到浏览器访问的路径前缀
      publicPath: '/videos'
    }
  }
}

配置完成后，模板中同样使用/videos/Space${videoIndex}.mp4作为src即可。但这个方案需要额外配置，且部署时要确保服务器上的视频路径和本地映射一致，不如Public目录方案省心。

内容的提问来源于stack exchange，提问作者Cédric NICOLAS