时间戳

首页 > 解决方案 > 将站点地图添加到 VueJS 应用程序

vue.js - 将站点地图添加到 VueJS 应用程序

问题描述

我在不使用 Vue CLI 的情况下使用 VueJS。我想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());

如果我将此文件添加到任何地方，则该app变量不存在（如我所料）。我假设这必须特别放在某个地方。

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

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

标签： vue.jsvuejs2vue-routersitemapxml-sitemap

解决方案

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

安装插件

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

下一部分您可以添加到您的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
}

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

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

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

推荐阅读