Nuxt 3中如何在nuxt.config.js中定义全局中间件？

在Nuxt3中，router.middleware配置项已被移除，全局中间件需要通过app.middleware配置数组来定义，同时可以精确控制执行顺序，和你在Nuxt2中的需求匹配。

正确配置方式 #

修改你的nuxt.config.js，将中间件配置从router选项移至app选项下：

export default defineNuxtConfig({
  // ... 其他配置项
  app: {
    middleware: ["redirect", "authenticated"], // 数组顺序即为中间件执行顺序
  },
  router: {
    base: `${process.env.ROUTER_BASE}`,
  },
})

关键说明 #

• 数组中的名称对应middleware目录下的文件（例如middleware/redirect.js和middleware/authenticated.js），无需添加文件后缀或.global标识。
• 中间件会严格按照数组的先后顺序执行：先执行redirect，再执行authenticated，完全符合你之前在Nuxt2中的控制逻辑。
• 中间件文件需使用defineNuxtMiddleware来定义，示例如下：

// middleware/redirect.js
export default defineNuxtMiddleware((to, from) => {
  // 这里编写你的重定向逻辑
})

两种全局中间件注册方式对比 #

• 自动全局注册：给中间件文件名添加.global.js/ts后缀（例如redirect.global.js），Nuxt3会自动将其注册为全局中间件，执行顺序按文件名排序（可通过前缀数字控制，如01.redirect.global.js）。
• 手动注册（推荐你的场景）：通过app.middleware数组指定，能更直观、精确地控制中间件的执行顺序，适合需要严格先后逻辑的场景。

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