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() {&nbsp; return {&nbsp; &nbsp; main: {&nbsp; &nbsp; &nbsp; bgVideo: require('../../assets/src/homepage.mp4'),&nbsp; &nbsp; }&nbsp; }}