Nuxt3 页面在生产时的滚动末尾重复两次

Question

当在本地运行项目时，无论是在开发还是生产模式下，分别使用

npm run dev

或

npm run build

后跟

npm run preview

，它在我的本地计算机上运行得很好，

在 Plesk 服务器中部署应用程序时，通过获取 .output 内容并设置以下设置

我的主页重复了（我看到我的主页，当我向下滚动时，我再次找到该页面，就像它重新渲染一样，它与顶部部分冲突），其他页面也是如此，有时它们会抛出 404 错误，因为404页面

这是app.vue页面

<script setup>
  useHead({
    script: [
      {
        src: 'https://www.googletagmanager.com/gtag/js?id=blablabla',
        async: true,
      },
      {
        innerHTML: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'blablabla');
        `,
      },
    ],
    link: [
      { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
      { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
      { rel: 'manifest', href: '/site.webmanifest' },
      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#14696d' },
    ],
  });
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

这是使用的 nuxt 配置

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-aos',
    '@nuxtjs/i18n',
  ],
  css: ['~/styles/globals.css'],
  plugins: [
    { src: '~/plugins/Vue3Lottie.client.js', mode: 'client' },
    { src: '~/plugins/Intercom.client.js', mode: 'client' },
    { src: '~/plugins/Flickity.js', ssr: false },
    { src: '~/plugins/FloatingVue.js', ssr: false },
  ],
  i18n: {
    vueI18n: './i18n/i18n.config.js',
  },
  devServer: {
    host: 'myhost',
    port: 443,
    https: {
      key: './cert/myhost-key.pem',
      cert: './cert/myhost.pem'
    }
  },
})

对于所使用的版本

    "nuxt": "^3.13.0",
    "vue": "latest",

Answer 1

我遇到了类似的问题。我的问题是由于我使用不正确的仪表板布局引起的。我确信您已经尝试过此操作，但如果您使用自定义布局文件，请尝试将其删除或放置一个全局变量，该变量会在页面已渲染时触发。

希望这有帮助