使用@nuxtjs/router的Nuxt2项目如何生成静态路由？

当你用@nuxtjs/router自定义路由后，Nuxt默认的自动路由扫描会失效，执行generate命令时得手动指定要生成的路由，还要处理动态路由的预生成逻辑。下面是具体操作步骤：

1. 在nuxt.config.js中配置generate选项 #

打开nuxt.config.js，添加generate配置项，列出所有静态路由，同时处理动态路由的预生成：

export default {
  // 原有配置...
  ssr: true,
  target: 'static',
  // 添加generate配置
  generate: {
    routes: async () => {
      // 先列出所有静态路由
      const staticRoutes = [
        '/',
        '/login',
        '/players',
        '/plans',
        '/plans/new',
        '/activities',
        '/activities/new',
        '/auth/login',
        '/superAdmin/',
        '/superAdmin/viewAll'
      ];

      // 处理动态路由：/players/:id，需要先获取所有玩家ID
      // 替换成你实际获取数据的方式（API接口/本地数据都可以）
      const playersRes = await fetch(process.env.API_URL + '/players');
      const players = await playersRes.json();
      const playerRoutes = players.map(player => `/players/${player.id}`);

      // 处理动态路由：/activityPlayer/:id，同理获取对应ID列表
      const activityPlayersRes = await fetch(process.env.API_URL + '/activity-players');
      const activityPlayers = await activityPlayersRes.json();
      const activityPlayerRoutes = activityPlayers.map(item => `/activityPlayer/${item.id}`);

      // 合并所有路由返回
      return [...staticRoutes, ...playerRoutes, ...activityPlayerRoutes];
    }
  },
  // 原有配置...
}

2. 关键注意点 #

• 动态路由必须提前拿到所有需要的参数值才能生成静态页面，如果没有API接口，也可以手动写死ID列表，比如const playerRoutes = ['/players/1', '/players/2']。
• 确保target已经设为static，这是静态生成的核心前提。
• 你的@nuxtjs/router在buildModules和modules里都配置了，其实只需要在buildModules中配置一次就行，避免重复加载。

3. 执行生成并验证 #

运行npm run generate（或yarn generate），生成完成后进入dist目录检查：

• 静态路由会生成对应文件夹下的index.html（比如/login对应dist/login/index.html）。
• 动态路由会生成参数对应的子文件夹（比如/players/1对应dist/players/1/index.html）。

生成的dist目录就可以直接用于Tauri打包，所有路由都能正常访问。

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