如何在Axios响应中动态导入视频并生成其绝对路径？

我有如下模板代码：

<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不会将@/替换为对应的绝对路径，导致模板无法识别该路径。我想知道如何在请求响应中获取视频的绝对路径，尝试过动态导入但不清楚如何整合到异步Axios请求中。

方法1：使用Vite的new URL生成绝对路径 #

Vite支持通过new URL()语法直接生成静态资源的绝对路径，在Axios响应回调中这样修改：

axios.get(`/project/v1/post/${route.params.id}`)
  .then((response) => {
    // 路径需相对于当前组件文件位置调整，示例为组件在src/components下时的路径
    const relativePath = `../assets/vids/${response.data.meta.video}`
    videoFileName.value = new URL(relativePath, import.meta.url).href
  })
  .catch((error) => {})

这种方式完全支持动态文件名，适合后端返回任意视频名称的场景。

方法2：整合动态导入到异步请求 #

动态导入可以让Vite在构建时处理资源路径，只需在Axios的回调中加入异步逻辑：

axios.get(`/project/v1/post/${route.params.id}`)
  .then(async (response) => {
    // 导入对应视频资源，路径同样需相对当前组件调整
    const videoAsset = await import(`../assets/vids/${response.data.meta.video}`)
    videoFileName.value = videoAsset.default
  })
  .catch((error) => {})

注意：这种方式要求视频文件名是Vite构建时可预扫描的（不能是完全无规则的动态字符串），如果后端返回的文件名不确定，优先用方法1。

方法3：利用public目录简化路径 #

把视频文件放到Vite项目的public目录下（比如public/vids/），直接通过根路径访问：

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

这种方式无需处理路径解析，适合不需要Vite进行资源处理的静态视频文件。

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