将站点地图添加到 VueJS 应用程序

Question

将站点地图添加到 VueJS 应用程序

Mic*_*ael 7 sitemap xml-sitemap vue.js vue-router vuejs2

我使用 VueJS 而不使用 Vue CLI。我想sitemap.xml向我的路由器添加一个，但我很难理解如何使用该vue-router-sitemap库。

我已经尝试使用提到的代码，但它没有指定应该添加到哪里。

import VueRouterSitemap      from 'vue-router-sitemap';
import path                  from 'path';
import { router }            from 'router';

...
export const sitemapMiddleware = () => {
  return (req, res) => {
    res.set('Content-Type', 'application/xml');

    const staticSitemap = path.resolve('dist/static', 'sitemap.xml');
    const filterConfig = {
      isValid: false,
      rules: [
        /\/example-page/,
        /\*/,
      ],
    };

    new VueRouterSitemap(router).filterPaths(filterConfig).build('http://example.com').save(staticSitemap);

    return res.sendFile(staticSitemap);
  };
};

app.get('/sitemap.xml', sitemapMiddleware());

Run Code Online (Sandbox Code Playgroud)

如果我将此文件添加到任何位置，则该app变量不存在（正如我所期望的那样）。我假设这必须放置在特定的地方。

我找不到任何其他关于如何执行此操作的示例，并且有关此库的其他问题在 reddit 或 stackoverflow 上仍未得到解答。

sitemap.xml向 VueJS 项目添加 a 的正确方法是什么？

Answer 1

Lud*_*fyn 7

我不知道vue-router-sitemap，但你可以尝试使用sitemap-webpack-plugin. 为此，您需要：

安装插件

npm install sitemap-webpack-plugin --save-dev

Run Code Online (Sandbox Code Playgroud)

您可以将下一部分添加到您的vue.config.js文件中。文档说将其添加到webpack.config.js文件中，但如果vue.js您正在使用，则应该将其放在vue.config.js位于项目根目录的中。如果不存在，您可以创建它。代码：

const SitemapPlugin = require('sitemap-webpack-plugin').default
// You can write the paths as an array of strings or an array of objects
const paths = [
  {
      path: '/',
      lastmod: '2021-11-22',
      priority: 1.0,
      changefreq: 'yearly'
  },
  {
      path: '/about/',
      lastmod: '2021-11-22',
      priority: 0.9,
      changefreq: 'yearly'
  }
]

module.exports = {
    configureWebpack: {
        plugins: [
            new SitemapPlugin({ base: 'https://example.com', paths })
        ]
    },
    // Other exports here
}

Run Code Online (Sandbox Code Playgroud)

然后，当您运行构建命令时，例如npm run build，应该生成 sitemap.xml 并放在您的dist文件夹中。

您可以在这里阅读有关如何使用它的更多信息：https://github.com/schneidmaster/sitemap-webpack-plugin

然后...这部分对于生成站点地图来说不是必需的，但是如果您这样做是为了让您的网站为 SEO 做好准备，那么我建议您还使用该模块在您网站的vue-metaHTML 标记中包含元标记等<head>。在这里阅读更多相关信息： https: //www.digitalocean.com/community/tutorials/vuejs-vue-meta。此外，如果您没有在服务器端渲染页面，那么我建议使用 prerender.io 为您的路线生成填充的 HTML 内容，并将其发送到正在抓取您网站的机器人（例如 googlebot）。否则，机器人只会抓取空的 HTML 页面。在这里阅读更多相关信息： https: //prerender.io/how-to-install-prerender/。

归档时间：	4 年，2 月前
查看次数：	11284 次
最近记录：	2 年，4 月前