VTT 文件未在 NuxtJS 中加載，src 返回 [object Module]

Question

我正在嘗試加載一個 VTT 文件，但是在配置加載器之后，src 返回 [object Module]，即使我確實需要（'file'）。默認，它仍然不會加載。 這是我的 nuxt.config.js 版本 object。

build: {
loaders: {
  vue: {
    transformAssetUrls: {
      src: 'src',
      source: 'src',
      track: 'src'
    }
  },
},
extend(config, { isDev, isClient }) {
  config.module.rules.push({
    test: /\.(vtt)(\?.*)?$/,
    loader: 'vue-loader',
    options: {
      esModule: false
    }
  });
}
},

Answer 1

從/static提供文件而不是在組件上導入。

用你的.vtt文件創建一個字典並添加 static 文件夾的絕對路徑，如果你願意，在 static 中創建一個名為subtitles的子文件夾，並在你的字典上創建一個路徑，如subtitles/subtitle_file_name.vtt

const VideoDictionary = {
  url: 'video_url_here',
  subtitle: 'subtitles/file_name_.vtt'
}

<video ...>
  <source :src="VideoDictionary.url" />

  <track 
    :src="VideoDictionary.subtitle" 
    label="English"
    kind="subtitles"
    srclang="en-US"
    default 
  />
</video>