Nuxt 2.15.0静态站点PDF短路径重定向生产环境失效问题

为什么serverMiddleware生产环境失效 #

开发环境下Nuxt依赖Node服务器处理请求，serverMiddleware能正常拦截请求并完成重定向；但生成静态站点后，所有资源都是静态文件，没有Node服务器运行，服务器端中间件无法生效。

三种有效解决方案 #

1. 客户端页面重定向 #

在pages目录创建file.pdf.vue文件，利用Nuxt的页面逻辑实现重定向：

<template></template>

<script>
export default {
  asyncData({ redirect }) {
    // 生成静态文件时触发服务端重定向逻辑
    redirect(301, '/complicated-file-name.pdf')
  },
  mounted() {
    // 客户端兜底重定向
    window.location.replace('/complicated-file-name.pdf')
  }
}
</script>

执行nuxt generate后，会生成对应的静态HTML文件，访问/file.pdf时自动跳转。

2. 静态HTML重定向文件 #

在static目录创建file.pdf文件（内容为HTML），通过meta标签和JS实现重定向：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="0; url=/complicated-file-name.pdf">
  <title>正在跳转...</title>
</head>
<body>
  <script>window.location.replace('/complicated-file-name.pdf');</script>
</body>
</html>

该文件会被直接复制到dist目录，访问时直接触发重定向。

3. 主机端重定向配置 #

如果使用第三方静态主机（如Netlify、Vercel），可直接在主机配置中添加重定向规则：

• Netlify：在static目录创建_redirects文件，内容为：

  /file.pdf /complicated-file-name.pdf 301
  

• Vercel：在vercel.json中添加：

  {
    "redirects": [
      { "source": "/file.pdf", "destination": "/complicated-file-name.pdf", "permanent": true }
    ]
  }
  

这种方式由主机直接处理重定向，性能最优。

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