Vue.js 如何在AXIOS调用响应中动态导入视频并创建它的绝对路径

发布于11月24日

我有这个模板:

<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通话中.

推荐答案

问题是，Vue/Vite不能识别运行时代码中的"@/"别名，就像在Axios响应中一样.您应该使用带有port.meta.url的新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) => {});