Nuxt 静态站点 - 标记在哪里？答案

【问题标题】：Nuxt static site - where is the markup?Nuxt 静态站点 - 标记在哪里？
【发布时间】：2021-05-24 00:09:00
【问题描述】：

我已将模式设置为静态并运行 npm run generate。该站点是从 /dist/ 目录提供的，但是当我查看源代码时标记在哪里？查看源代码：https://eosnomad.com/

我不认为我在这里获得了 SEO 好处，因为 Google 看不到 HTML。在查看开发工具时，我只看到源代码。我做错了吗？

这是我的 nuxt 配置：

export default {
  target: 'static',
  head: {
    title: process.env.DOMAIN,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content:
          process.evn.CONTENT,
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  css: [],

  plugins: [
    { src: '~/plugins/cookie-law', mode: 'client' },
    { src: '~/plugins/vue-agile', mode: 'client' },
    { src: '~/plugins/vue-js-modal', mode: 'client' },
    { src: '~/plugins/vue-formulate', mode: 'client' },
    { src: '~/plugins/vue-the-mask', mode: 'client' },
    { src: '~/plugins/route-to-hash', mode: 'client' },
    { src: '~/plugins/global-components', mode: 'client' },
  ],

  components: true,

  publicRuntimeConfig: {
    baseSiteTitle: '${DOMAIN}',
    siteID: '${WORDPRESS_SITE_ID}',
    cmsEndpoint: process.env.IS_LOCAL
      ? 'https://dashboard${TLD_LOCAL}/${WORDPRESS_SITE_SLUG}/${WORDPRESS_ACF_ENDPOINT}'
      : 'https://dashboard${TLD}/${WORDPRESS_SITE_SLUG}/${WORDPRESS_ACF_ENDPOINT}',
    newsEndpoint: process.env.IS_LOCAL
      ? 'https://dashboard${TLD_LOCAL}/wp-json/getnews?property_id=${WORDPRESS_SITE_ID}'
      : 'https://dashboard${TLD}/wp-json/getnews?property_id=${WORDPRESS_SITE_ID}',
  },

  tailwindcss: {
    exposeConfig: true,
  },

  loading: false,

  buildModules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/pwa',
    [
      '@teamnovu/nuxt-breaky',
      {
        enabled: true,
        enableInProd: false,
        colorScheme: 'auto',
        position: 'bottomRight',
      },
    ],
  ],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/svg',
    'nuxt-fontawesome',
    '@nuxtjs/dayjs',
    ['vue-scrollto/nuxt', { duration: 1000, easing: 'ease-in-out' }],
  ],

  dayjs: {
    plugins: ['isSameOrAfter', 'isSameOrBefore'],
  },

  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: [
          'faBullhorn',
          'faSortUp',
          'faSortDown',
          'faUtensils',
          'faEnvelopeOpenText',
          'faArrowLeft',
          'faArrowRight',
          'faTimesCircle',
        ],
      },
      {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['faFacebookSquare', 'faTwitterSquare', 'faInstagram'],
      },
    ],
  },

  webfontloader: {
    typekit: {
      id: 'XXXX',
    },
  },

  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      },
    },
  },

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {},
}

【问题讨论】：

尝试检查并找出为什么你有一个noscript，看起来它来自 GTM。
这与缺少 HTML 标记有什么关系？
它没有被渲染，因为浏览器只能选择带有来自 GTM 的 iframe 的 noscript 标签。因为它看起来像是最后生成的东西，所以在水合之前您没有任何静态标记。仔细检查您是否在本地安装它，并尝试禁用 GTM。
我把标签剪掉了，还是一样的问题。上面的所有内容都来自 fetch API 调用。我创建了另一个 nuxt 站点，这个站点包含硬编码内容：licrentregulated.com。这可能是问题吗？ API 调用正在驱动内容，因此标记不存在？
取决于 API 返回什么以及它应该如何工作。你读过这个文档吗？

标签： seo nuxt.js static-site

【解决方案1】：

我明白了。这是一个单页网站，我将所有组件都放在了默认布局文件中。为了正确生成静态标记，所有这些都需要在 index.vue 文件中。

【讨论】：