从Vue组件的Javascript部分到资源的路径

Question

我需要从我的组件的脚本部分定义资产的路径，在这里我不能使用“@/”或“./”，因为它们只是在DOM中显示而没有被替换。

在脚本中定义资产路径的最佳方式是什么？

<template>
  <video
    loop
    autoplay
    muted
  >
    <source :src="source" type="video/mp4">
  </video>
</template>

<script>
export default {
  props: {
    sourceFile: {
      type: String
    },
  },
  computed: {
    source () {
      return this.sourceFile || '@/assets/video/video.mp4'
    }
  },

Answer 1

希望这有助于：

<script>
// Either of the import methods should work
const theVideo = require('@/assets/video/video.mp4');
import theVideo from '@/assets/video/video.mp4';

export default {
  computed: {
    source () {
      return this.sourceFile || theVideo;
    },
  },