NuxtJS中VTT文件无法加载，src返回[object Module]求助

问题原因 #

你当前配置错误地使用vue-loader处理VTT文件——vue-loader的作用是解析.vue单文件组件，并不适合处理VTT这类静态资源，这导致资源路径未被正确解析，最终返回[object Module]。

修复步骤 #

1. 替换正确的资源加载器
   将VTT文件的处理规则改为file-loader，它专门用于处理静态资源并输出正确的文件路径。
2. 配置esModule为false
   确保file-loader输出CommonJS模块格式，直接使用require()就能获取文件路径字符串，无需额外访问.default属性。
3. 保留transformAssetUrls配置
   你已正确配置Vue模板中track标签的src属性转换规则，这部分可保留。

修改后的nuxt.config.js配置 #

build: {
  loaders: {
    vue: {
      transformAssetUrls: {
        src: 'src',
        source: 'src',
        track: 'src'
      }
    },
  },
  extend(config, { isDev, isClient }) {
    config.module.rules.push({
      test: /\.(vtt)(\?.*)?$/,
      loader: 'file-loader', // 替换为file-loader
      options: {
        esModule: false,
        name: '[path][name].[ext]' // 可自定义输出文件路径格式，按需调整
      }
    });
  }
}

使用示例 #

在Vue模板中直接引用VTT文件：

<video controls>
  <source src="/path/to/video.mp4" type="video/mp4">
  <track src="~/assets/subtitles/video-sub.vtt" kind="subtitles" srclang="en" label="English">
</video>

在脚本中引用：

export default {
  data() {
    return {
      subtitleUrl: require('~/assets/subtitles/video-sub.vtt')
    }
  }
}

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