Vue项目基于Nuxt构建后PDF下载异常：本地正常构建后文件丢失

这问题我之前帮好几个开发者踩过坑，核心就是Nuxt在开发和生产环境对静态资源的处理逻辑有差异，加上路径和目录命名的小疏忽导致的。给你一步步排查解决：

• 先检查目录大小写：
  Nuxt默认的静态资源目录是全小写的static，如果你命名成了Static（首字母大写），本地开发环境（比如Windows）可能不区分大小写能正常访问，但构建后部署到Linux服务器上，系统是严格区分大小写的，就会找不到文件。赶紧把目录改成static/documents，确保所有字母都是小写。

• 修正链接路径的写法：
  开发环境下你可能写了/Static/documents/xxx.pdf，但Nuxt构建时会把static目录下的所有文件直接放到构建产物的根目录里，也就是说static/documents/xxx.pdf最终的访问路径是/documents/xxx.pdf，不需要带static前缀。
  正确的链接写法应该是：

  <a href="/documents/your-file-name.pdf" download>下载PDF</a>
  

  这里的/是根路径，确保不管部署在什么环境下都能正确指向资源。

• 验证构建产物是否包含PDF文件：
  运行npm run build后，去项目根目录下的.nuxt/dist/client文件夹里看看，有没有documents文件夹和对应的PDF文件。如果没有，说明Nuxt没把静态资源复制过去，这时候要检查nuxt.config.js里有没有修改过dir.static配置，如果自定义了静态目录路径，要确保路径和实际文件夹一致，或者改回默认的static。

• 如果部署在子路径下的额外配置：
  要是你的项目部署在网站的子路径（比如https://your-domain.com/nuxt-app/），那得在nuxt.config.js里配置路由基础路径：

  export default {
    router: {
      base: '/nuxt-app/'
    },
    publicRuntimeConfig: {
      baseURL: process.env.NUXT_BASE_URL || '/nuxt-app/'
    }
  }
  

  然后链接要动态拼接基础路径：

  <a :href="`${$config.baseURL}documents/your-file-name.pdf`" download>下载PDF</a>
  

一般来说，前两步就能解决大部分问题，尤其是目录大小写和路径前缀的问题，是最容易犯的错误。

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