Vue项目引用src目录外Files/Work文件遇下载失败，如何解决？

问题根源 #

Vue开发服务器默认仅将public目录作为静态资源根目录对外开放，你放在项目根目录的Files/Work不在这个范围内，所以直接通过http://localhost:8080/Files/Work/xxx访问时，服务器找不到对应文件；同时Vue Router会拦截该路径，跳转到路由匹配逻辑，最终因无对应路由仅显示导航栏。

可行解决方案 #

方案一：修改开发服务器配置，新增静态资源目录 #

针对开发环境，可修改（无则新建）vue.config.js，通过devServer.static配置额外暴露Files目录：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    static: {
      directory: './Files',
      publicPath: '/Files'
    }
  }
})

修改后重启开发服务器，原URL即可正常访问文件，下载功能同步恢复。

方案二：调整Files目录到public下 #

若文件生成路径可调整，直接将Files目录移动到public目录内：

public/
  +---Files
      \---Work

此时锚标签可改用相对路径：

<a href="/Files/Work/my_file.pdf" download="my_file.pdf">
    Download
</a>

该方式同时适配开发和生产环境。

方案三：通过后端接口提供文件下载（生产环境推荐） #

若文件为动态生成，或需适配生产部署场景，建议通过后端接口返回文件流：

1. 后端编写接口（如GET /api/download-file），接收文件名参数
2. 后端读取Files/Work下的目标文件，设置Content-Type、Content-Disposition等响应头后返回文件流
3. 前端通过接口请求触发下载，示例代码：

async function downloadFile() {
  const response = await axios.get('/api/download-file?filename=my_file.pdf', {
    responseType: 'blob'
  })
  const url = window.URL.createObjectURL(new Blob([response.data]))
  const a = document.createElement('a')
  a.href = url
  a.download = 'my_file.pdf'
  document.body.appendChild(a)
  a.click()
  window.URL.revokeObjectURL(url)
  document.body.removeChild(a)
}

该方式安全性更高，适配复杂生产部署场景。

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