Nuxt3中如何在server目录下导入编译后的Vue路由（兼容开发与生产环境）

嘿，我完全懂你的困扰——Nuxt3开发时能通过http://localhost:3000/_vfs看到虚拟文件系统里的路由，但在server目录里用#build/routes导入就报错，生产环境连VFS都没有，确实怀念Nuxt2里直接读.nuxt/routes.json的便捷！

别担心，咱们可以用Nuxt的钩子自己实现类似的效果，让server在开发和生产环境都能拿到路由数据，步骤很简单：

第一步：用Nuxt钩子生成路由JSON文件 #

在你的nuxt.config.ts里，添加一段代码，利用pages:extend钩子把路由数据写入到server能访问的文件中：

import fs from 'fs/promises'
import path from 'path'

export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      // 把处理好的路由数组转成格式化的JSON字符串
      const routesJson = JSON.stringify(pages, null, 2)
      // 指定文件路径，我习惯放在server目录下的data文件夹，方便区分
      const filePath = path.resolve(process.cwd(), 'server/data/routes.json')
      // 自动创建不存在的目录
      await fs.mkdir(path.dirname(filePath), { recursive: true })
      // 写入路由数据到文件
      await fs.writeFile(filePath, routesJson, 'utf-8')
    }
  }
})

这个钩子会在Nuxt处理完所有页面路由（包括你手动扩展的自定义路由）后触发：

• 开发模式下，只要你修改页面或路由配置，它就会自动更新这个JSON文件
• 生产构建时，它会在构建阶段生成最终的路由文件，确保server能读到最新的路由数据

第二步：在server目录中读取路由文件 #

现在你可以在server的API文件里直接读取这个JSON文件了，比如在你提到的server/api/[locale]/lalala.get.js里：

import fs from 'fs/promises'
import path from 'path'

export default defineEventHandler(async () => {
  // 读取刚才生成的路由文件
  const filePath = path.resolve(process.cwd(), 'server/data/routes.json')
  const routesJson = await fs.readFile(filePath, 'utf-8')
  const routes = JSON.parse(routesJson)
  
  // 这里就可以用拿到的路由数据做你需要的操作了
  return { routes }
})

小提示 #

• 如果你不想把自动生成的routes.json提交到Git，可以在.gitignore里加上一行：server/data/routes.json
• 这个方法和Nuxt2的思路本质一样，都是把路由数据落地成文件，让server能直接访问，完美兼容开发和生产环境

备注：内容来源于stack exchange，提问作者Gavin Kemp