如何动态导入视频+在 axios 调用响应中创建视频的绝对路径？

Question

我有这个模板：

<video controls autoplay muted loop>
  <source :src="videoFileName" />
</video>

视频源的获取方式如下：

axios.get(`/project/v1/post/${route.params.id}`)
  .then((response) => {
    videoFileName.value = `@/assets/vids/${response.data.meta.video}`
  })
  .catch((error) => {})

这失败了，因为 Vue/Vite 没有用相应的绝对路径替换“@/”，因此模板部分收到了“@/...”，这是它无法理解的。

如何获取呼叫响应中的绝对路径？

https://vitejs.dev/guide/features.html#dynamic-import似乎是可行的方法，但是我不确定如何将其集成到我的非同步 axios 调用中。

Answer 1

问题是 Vue/Vite 无法识别运行时代码中的“@/”别名，就像在 Axios 响应中一样。您应该使用带有 import.meta.url 的 new URL 来动态构建绝对路径：

axios.get(`/project/v1/post/${route.params.id}`)
  .then((response) => {
    const relativePath = `/assets/vids/${response.data.meta.video}`;
    videoFileName.value = new URL(relativePath, import.meta.url).href;
  })
  .catch((error) => {});