跳到主要内容

nuxt问题

  • 错误处理？

nuxt发生server Error解决​

  • nuxt项目发生错误导致整个页面渲染出现Server Error

  • 一个页面有多个的并发请求，其中只要有一个请求出现问题，那整个页面就出不了

  • 这种一般是捕捉asyncData网络请求错误

问题：

  • 1、在用nuxt的时候怎么才能够尽可能的保证接口出问题时，页面不会完全崩溃？
  • 2、如何快速定位错误？

解决：

  • 通过配置错误页面，统一将相关错误跳转到自定义错误的页面

nuxt 服务端/客户端执行问题​

  • 以下代码都会执行，执行顺序是 先服务端渲染，后客户端渲染
    • 这是nuxt 服务端渲染的工作流程
    • 当用户请求页面的时候，服务端会读取代码来生成HTML，返回给客户端，客户端加载HTML，因此客户端和服务端都会执行
vue
<template>
    <div> test</div>
</template>
<script lang="ts">
if (import.meta.server) {
  console.log("服务端渲染");
} else {
  console.log("客户端渲染");
}
</script>

注意问题​

  • 某些组件，如果涉及到DOM的事件操作，需要使用client-only>来包裹，避免在服务端执行渲染报错
    • 但是注意一点，如果纯使用client-only的话，在服务端渲染期间，会出现空白
    • 首屏出现空白，这是用户体验极其不好的问题，需要去避免，这也会影响seo
    • 比如在服务端渲染期间，先输出DOM结构，保证首屏有内容， 而相关DOM事件操作，在客户端来执行
    • 最佳实战：
      • 服务端ssr渲染期间：输出DOM结构内容 （保证首屏体验）
      • 客户端csr渲染期间：操作DOM、交互相关事件

调试nuxt​

  • 1、开启debug

nuxt请求缓存问题​

  • nuxt的useFetch默认会对url进行缓存，如果进行的url相同，会返回相同的结果

默认情况下，如果你在同一个页面生命周期内，或在服务端渲染（SSR）期间重复请求相同的 URL，Nuxt 会自动缓存第一次请求的结果，后续相同的请求不会重新发送，而是复用缓存的数据

场景是否缓存说明
多次请求相同 URL，未设置 key✅ 缓存默认会返回第一次请求的结果
设置不同 key❌ 不缓存被视为不同请求
设置 cache: false❌ 不缓存强制跳过缓存，重新发请求
请求参数不同（如 query）✅/❌ 视 URL 而定URL 不同就不缓存，URL 相同才缓存

nuxt内存溢出​

使用组件库问题​

  • Nuxt UI（@nuxt/ui）里几乎所有交互式组件（UTabs、UAccordion、USelectMenu、UCarousel……）在 SSR（服务端渲染）时都无法正确回显 v-model 的默认值
    • 必须等客户端 hydration 完成后才“突然跳到正确的位置”，而且如果不包 ClientOnly 甚至会直接报错或白屏
  • 传统的组件库中相关的状态都是通过客户端状态来驱动的，比如事件绑定
  • 为了解决交互式组件回显问题，可以使用无头组件如HeadlessUI
    • Headless UI 的“事件”只是状态更新逻辑，并不依赖 DOM 状态，因此可以兼容SSR

解决标签栏回显问题​

  • 可使用导航栏菜单，每一个菜单标签都使用链接导航，替代了标签栏这种回显问题

  • 导航菜单路径 pages/tabs

    • pages/tabs/index.vue
    • pages/tabs/one.vue
    • pages/tabs/two.vue
bash
<template>
  <div class="flex justify-center items-center flex-col">
    <span class="bg-amber-200">nuxt-tabs demo</span>
    <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
    <div class="p-8">
      <NuxtPage />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const links = [
  { label: '默认tab', to: '/tabs', exact: true },
  { label: 'tab1', to: '/tabs/one' },
  { label: 'tab2', to: '/tabs/two' },
] as NavigationMenuItem[]
</script>