NuxtJS配置：访问localhost:3000自动重定向至base-url路由

嘿，这个需求我之前帮朋友处理过，其实分Nuxt 2和Nuxt 3两种主流版本，实现方式略有不同，我给你详细说说：

推荐用服务器端中间件来做，不仅对SEO友好，还能在请求到达前端之前就完成重定向，效率更高。

方法一：服务器端全局中间件 #

1. 在项目根目录创建 server/middleware/redirect-root.ts 文件，写入以下代码：

export default defineEventHandler((event) => {
  const requestPath = event.node.req.url;
  // 判断是否访问的是根路径
  if (requestPath === '/' || requestPath === '') {
    // 301是永久重定向，临时重定向可以改成302
    return sendRedirect(event, '/base-url/', 301);
  }
});

Nuxt 3会自动识别server/middleware目录下的文件作为服务器中间件，不需要额外注册，重启项目就生效。

方法二：客户端页面重定向（适合纯SPA场景） #

如果你的项目是纯客户端SPA模式，也可以在app.vue里处理：

<script setup>
const route = useRoute();

// 页面加载时判断路径，根路径则跳转
if (route.path === '/') {
  navigateTo('/base-url/', { redirectCode: 301 });
}
</script>

不过这种方式是客户端跳转，服务器端渲染的场景还是优先用第一种方法。

方法一：服务器中间件（推荐） #

1. 创建 serverMiddleware/redirect-root.js 文件：

export default function (req, res, next) {
  if (req.url === '/' || req.url === '') {
    // 发送301重定向响应
    res.writeHead(301, { Location: '/base-url/' });
    res.end();
  } else {
    // 非根路径则继续执行后续逻辑
    next();
  }
}

2. 在 nuxt.config.js 里注册这个中间件：

export default {
  serverMiddleware: [
    '~/serverMiddleware/redirect-root.js'
  ]
}

方法二：页面级重定向（SSR/SPA通用） #

如果是静态生成或者不想用服务器中间件，可以在pages/index.vue里处理：

<script>
export default {
  // SSR模式下用asyncData在服务器端完成重定向
  async asyncData({ redirect }) {
    redirect(301, '/base-url/');
  },
  // SPA模式下用mounted钩子
  mounted() {
    if (this.$route.path === '/') {
      this.$router.replace('/base-url/');
    }
  }
}
</script>

• 重定向状态码：301是永久重定向，适合长期固定的路径变更；302是临时重定向，适合短期调整。
• 缓存问题：301重定向会被浏览器缓存，测试时记得用无痕模式或者清除浏览器缓存，避免看不到最新效果。
• baseURL设置：如果你已经在配置文件里设置了baseURL（比如Nuxt 3的app.baseURL = '/base-url/'），访问根路径时还是需要手动添加重定向逻辑，因为baseURL只是改变应用的基础路径，不会自动处理根路径的跳转。

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