记一次在nuxt中使用generate批量生成静态站点页面

做过seo的同学都知道，一些不是实时变化的页面（比如一个星期更新一次内容）我们可以生成静态的站点去让爬虫去爬去，这样就无需一次次地调用接口了。

那么在nuxt中我们怎么去做呢？

nuxt为我们提供了一次generate的钩子，在nuxt.config.js中，我们去添加generate钩子

module.exports {
    //......
    //......
    generate: {
        dir: "generateDist",
        concurrency: 10,
        interval: 100,
        crawler: false,
        routes() {}
    }

}

dir：我们生成的静态文件的目录，

concurrency：我们在批量生成文件的时候一次产生的文件数量，

interval：批量生成文件间隔，

crawler：比如我们的页面中有a链接的话，会生成a链接指向的页面的静态页面（早期版本没有提供这个属性），

routes：我们想要生成静态页面对应的vue文件路由，它返回一个数组对象，如下图实战代码：

routes() {
      let arr = [];
      let ff = ['','A','B','C'];
      for (let i = 0; i < ff.length; i++) {
        arr.push(
          new Promise((resolve, reject) => {
            axios({
              url:
                "http://....../team/map?type=" +
                ff[i],
              method: "get",
            })
              .then((res) => {
                resolve({
                  route: "/sitemap/" + ff[i],
                  payload: res,
                });
              })
              .catch((err) => {
                resolve({
                  route: "/sitemap/" + ff[i],
                  payload: {},
                });
              });
          })
        );
      }
      
      return Promise.all([...arr])
        .then((d) => {
          arr = null;
          return d;
        })
        .catch(() => {
          return [];
        });
    },

resolve中的route是我们vue页面对应的路由，payload是传入这个页面的负载数据，然后我们在vue页面中就可以这样使用：

asyncData({ store, params, payload, res }) {
    if (payload) {
        return {
            topArr: payload.topPlayers,
            allArr: payload.players,
            filterName: params.type
        };
    }
    // else {
    //     return store.dispatch("teamMapAction_player", {
    //         type: ""
    //     });
    // }
}

拿到topArr等数据后就可以愉快地渲染页面了~

执行 npm run generate 即可生成对应的html文件。

"generate": "cross-env ISGERNERATE=1 NUXT_ENV_BUILD_ENV=production  nuxt generate",