【问题标题】:Problem while navigating a statically generated site with nuxt使用 nuxt 导航静态生成的站点时出现问题
【发布时间】:2021-06-23 15:35:32
【问题描述】:

我正在使用 nuxt 构建一个静态站点,但有些元素不是静态的。在开发模式下,一切正常,并且在生成之后没有错误,启动 nuxt start 命令,它给了我以下消息:TypeError: n.setAttribute is not a functionTypeError: can't access property "_isDestroyed,并且未定义“仅在页面上,特别是当我点击其中的一个链接。有人知道它是什么吗?


require('dotenv').config()
export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',
  /**
   * Disable Purge CSS in prod
   */
  purgeCSS: {
    mode: 'postcss',
    enabled: false
  },
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'site title',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/css/custom.css' },
      { rel: 'stylesheet', href: '/css/style.css' }
    ]
  },
  // Generate
  generate: {
    // 404 fallback
    fallback: true
  },
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/vuejs-paginate.js',
    { src: '~/plugins/vue-announcer.js', mode: 'client' },
    { src: '~/plugins/vue-video', mode: 'client' },
    { src: '~/plugins/search-bar.js', mode: 'client' },
    { src: '~/plugins/search-view.js', mode: 'client' }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // Tailwind CSS
    '@nuxtjs/tailwindcss',
    // Add page in sitemap route array
    '@/modules/sitemapRouteGenerator',
    // dotenv
    ['@nuxtjs/dotenv', {
      filename: '.env'
    }]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    ['nuxt-i18n', {
      detectBrowserLanguage: {
        alwaysRedirect: false
      },
      strategy: 'prefix',
      defaultLocale: 'en',
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          file: 'en.js',
          dir: 'ltr'
        },
        {
          code: 'it',
          iso: 'it-IT',
          file: 'it.js',
          dir: 'ltr'
        }
      ],
      langDir: 'locales/',
      vueI18n: {
        fallbackLocale: 'en'
      }
    }],
    '@nuxtjs/axios',
    // Always leave as last
    '@nuxtjs/sitemap'
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    ssr: true,
    extractCSS: true
  },
  // Axios
  axios: {
    baseURL: 'http://localhost'
  },
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'http://localhost:3000/',
    defaults: {
      changefreq: 'monthly',
      priority: 1.0,
      lastmod: new Date()
    },
    gzip: true,
    exclude: []
  }
}

错误来自动态生成所有详细信息的页面。
让我解释一下:我有一个 Category 文件夹,里面有一个 _slug.vue 文件,我用它来生成每个类别的主页。
在类别文件夹中,我有一个名为 d 的附加文件夹,其中包含一个 _detail.vue 文件,其中包含文章详细信息。
_slug.vue 和 _detail.vue 是唯一不同的页面生成的路径,以及在_slug 中默认有第一篇文章和属于该类别的文章列表,而在_detail 中有我从列表中选择的文章。
该列表是一个

<ul>
  <li>
    <a> article title</a
  </li>
</ul>

最初我尝试将&lt;n-link&gt; 用于&lt;a&gt; 标签帖子,但点击它只更改了路径,并没有将我重定向到包含更新内容的页面。

【问题讨论】:

  • 您能否在您的问题中添加一些格式正确并突出显示的nuxt.config.js?另外,您如何构建您的应用程序?另外,这些错误来自哪些文件?而且,您如何在应用中导航?
  • 我的nuxt config。我使用nuxt generate 生成应用程序并使用nuxt start 测试它
  • 我已将 nuxt condig 编辑为 您的问题作为文本。你不需要在nuxt.config.js 中使用dotenv,这已经被烘焙了。其余的配置看起来不错。构建过程也是如此。我剩下的两个问题仍然存在。另外,我想我们很快需要托管minimal reproducible example,因为这可能来自您的代码(页面/组件)。
  • 嘿,请随时更新您的问题以进一步回答我(只需告诉我这已更新),这将更清晰,您不会创建非答案。我有点明白了。尽管如此,我的 2 个初始问题(第一条评论)仍然有效。我真的很感激你的结构或更好的一些视觉效果,minimal reproducible example
  • 好像已经解决了。我通过v-html 将一些内容注入p 标签,这给我带来了问题。经过一些测试,我将p 标签更改为span,似乎错误消失了。非常感谢您的宝贵时间。

标签: nuxt.js


【解决方案1】:

很高兴您的代码现在可以正常工作!
我仍然建议您使用vue-dompurify-html 来防止任何安全问题,如官方文档中所述:https://vuejs.org/v2/guide/syntax.html#Raw-HTML

最终结果在代码方面不会有大的变化,但在安全性方面会更安全。

<div v-dompurify-html="rawHtml"></div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-05-28
    • 2022-12-05
    • 2022-11-10
    • 2021-04-20
    • 1970-01-01
    • 2021-09-29
    • 1970-01-01
    相关资源
    最近更新 更多