vuejs组件视频路径未从数据渲染

Question

这是我的数据：data() {   return {      main: {         bgVideo: '../../assets/src/homepage.mp4',      }   }}这是我的组件：<template>    <video autoplay muted loop>        <source :src="main.bgVideo" type="video/mp4">    </video></template>当我在视频 src 中硬编码路径（'../../assets/src/homepage.mp4'）时，它可以工作。当我尝试从数据中传递路径时，它无法呈现。页面本身没有错误，除了背景视频应该是的空白画布。这是奇怪的部分——当我将路径硬编码到视频 src 中时，Inspect Element 会像这样渲染路径。但是，这实际上有效并将视频呈现到页面上。当我尝试通过数据传递路径，它呈现的路径是这样，未能在页面上呈现。

Answer 1

您的应用程序正在使用 webpack 构建，该 webpack 配置了file-loader以将模板源中的引用资产复制到目标文件夹，并且src路径将替换为新文件的路径。当src绑定到一个动态值时，webpack 在构建时无法知道资产文件是什么，因此不会发生转换，并且在运行时src设置为../../assets/src/homepage.mp4但该位置没有文件由webpack-dev-server 提供服务（这是您在开发模式下运行应用程序时运行的开发 Web 服务器）。

您需要通过在代码中导入模块（使用require或 ES6 import）来告诉 webpack 加载资产：

data() {

  return {

    main: {

      bgVideo: require('../../assets/src/homepage.mp4'),

    }

  }

}