[JavaScript知识库]VUE 项目如何生成sitemap

Simple Sitemap For Vue Router (zigamiklic.com)

1. 准备代码

在router.js 中 添加如下代码

function getRoutesList(routes, pre) {
  return routes.reduce((array, route) => {
    const path = `${pre}${route.path}`;

    if (route.path !== '*') {
      array.push(path);
    }

    if (route.children) {
      array.push(...getRoutesList(route.children, `${path}/`));
    }

    return array;
  }, []);
}


// getRoutesList(router.options.routes, 'https://zigamiklic.com');
function getRoutesXML() {
  const list = getRoutesList(router.options.routes, 'https://www.gjdbyy.com/')
    .map(route => `<url><loc>${route}</loc></url>`)
    .join('\r\n');
  return `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
    ${list}
  </urlset>`;
}

console.log(getRoutesXML())

2. npm run serve 运行

运行后会在控制台中打印出来sitemap 信息，然后贴到网站根目录下即可

?