Nuxt：如何在script部分获取静态文件夹路径（非template）

问题根源 #

模板中直接使用动态require时，Webpack编译阶段无法正确解析动态路径表达式，导致出现Cannot find module './'错误——因为模板的表达式执行时机晚于Webpack的静态分析阶段，它没法提前识别你要加载的具体文件。

解决方法 #

在script中通过计算属性或方法处理动态路径，给Webpack/Vite明确的扫描前缀，让它能预加载目标目录下的文件：

Nuxt 2（Webpack）写法

<template>
  <video-player :src="videoUrl" />
</template>

<script>
export default {
  data() {
    return {
      videoFileName: 'demo.mp4' // 你的视频文件名变量，需带后缀
    }
  },
  computed: {
    videoUrl() {
      // 固定路径前缀`~/assets/vids/`让Webpack预扫描该目录下的所有文件
      return require(`~/assets/vids/${this.videoFileName}`)
    }
  }
}
</script>

Nuxt 3（Vite）写法

如果用的是Nuxt 3，由于底层是Vite，需要改用import.meta.glob实现动态导入：

<template>
  <video-player :src="videoUrl" />
</template>

<script setup>
const videoFileName = ref('demo.mp4')

const videoUrl = computed(() => {
  // 预加载assets/vids下的所有文件，指定返回URL格式
  const videoMap = import.meta.glob('~/assets/vids/*', { eager: true, as: 'url' })
  return videoMap[`~/assets/vids/${videoFileName.value}`]
})
</script>

关键注意点 #

• 确保videoFileName是完整的文件名（包含后缀，比如.mp4），不能是空值或仅路径片段，否则Webpack/Vite无法匹配到实际文件
• 如果有多个视频需要切换，可以在组件初始化时预加载所有视频路径到对象中，避免重复计算

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