Vue中如何为v-for循环元素正确绑定HTML Video的src属性？

问题原因 #

硬编码路径时，Vue的webpack构建工具会自动解析../assets/homeVid.mp4这类相对路径，将其转换为编译后的资源路径（通常带哈希值）；但动态绑定:src="item.vidPath"时，webpack不会解析字符串形式的路径，浏览器会直接以当前页面URL为基准发送请求，忽略路径中的..，导致资源定位失败。

解决方案 #

方案1：在数据中用require()包装路径

修改列表数据，将vidPath的值用require()包裹，让webpack提前解析路径：

// 示例数据
data() {
  return {
    items: [
      { vidPath: require('../assets/homeVid.mp4') },
      // 其他条目...
    ]
  }
}

模板中直接绑定：

<video :src="item.vidPath" controls></video>

方案2：模板中动态使用require()

如果无法修改原始数据，可在模板中直接对路径执行require()：

<video :src="require(item.vidPath)" controls></video>

注意：item.vidPath必须是相对于当前组件文件的静态可解析路径，比如../assets/homeVid.mp4，不能是完全动态的拼接（比如../assets/${name}.mp4），除非提前告知webpack要打包的资源范围。

方案3：将视频移至public目录

把视频文件放到项目根目录的public文件夹下，使用绝对路径动态绑定：

// 数据中的路径改为绝对路径
items: [
  { vidPath: '/homeVid.mp4' },
  // 其他条目...
]

模板绑定：

<video :src="item.vidPath" controls></video>

这种方式下，资源不会被webpack处理，会直接复制到构建后的根目录，浏览器请求路径为localhost:8080/homeVid.mp4，无需解析相对路径。

补充说明 #

如果需要动态拼接文件名（比如根据不同条目加载不同视频），可以用如下方式让webpack识别需要打包的资源：

<video :src="require(`../assets/${item.vidName}.mp4`)" controls></video>

此时webpack会打包../assets目录下所有.mp4格式的文件，确保动态拼接的路径能正确加载。

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