如何消除Nuxt中的FOUC（无样式内容闪烁）问题

1. 自定义404页面并优化加载逻辑 #

• 在项目pages目录下创建404.vue，确保页面的基础结构、样式为同步渲染，避免依赖异步组件或延迟加载资源
• 不要在asyncData/fetch钩子中执行耗时操作，非核心逻辑可放到客户端mounted钩子中执行
• 给404页面设置兜底样式（比如背景色、默认字体），避免未加载完成时的空白状态

2. 用自定义中间件提前拦截无效路由 #

• 在middleware目录新建error-handler.js，提前判断路由有效性，直接触发404错误：

  export default function ({ app, error }) {
    const validPaths = app.router.options.routes.map(r => r.path)
    if (!validPaths.includes(app.route.path)) {
      error({ statusCode: 404, message: '页面不存在' })
    }
  }
  

• 在nuxt.config.js中注册该中间件，确保路由解析前执行：

  export default {
    router: {
      middleware: 'error-handler'
    }
  }
  

3. 优化路由过渡与全局加载状态 #

• 禁用404页面的路由过渡动画，避免过渡过程中出现白屏，在nuxt.config.js中配置：

  export default {
    pageTransition: {
      name: 'page',
      mode: 'out-in',
      exclude: ['/404']
    }
  }
  

• 在全局布局（如layouts/default.vue）中添加加载占位，路由切换时显示直到页面渲染完成：

  <template>
    <div>
      <div v-if="$nuxt.isLoading" class="loading-overlay">加载中...</div>
      <nuxt />
    </div>
  </template>
  
  <style>
  .loading-overlay {
    position: fixed;
    inset: 0;
    background: #f5f5f5; /* 匹配你的主题背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  </style>
  

4. 优化SSR模式下的服务器端处理（针对SSR项目） #

• 确保服务器端能正确捕获无效路由，直接返回404页面的渲染结果，避免先返回空白HTML再客户端跳转
• 给服务器端的异步请求添加错误捕获，防止因渲染错误导致返回空白内容

内容的提问来源于stack exchange，提问作者sandalwoodsh