Nuxt2如何根据客户端URL切换loadingIndicator的HTML文件？

由于两个URL属于运行时的请求差异，无法直接在nuxt.config.ts的静态配置中完成切换，需要通过服务器端中间件在每个请求进来时动态处理，具体步骤如下：

1. 准备自定义loading HTML文件 #

在项目的static目录下创建两个loading模板文件，比如loading-client1.html和loading-client2.html，内容根据需求自定义（比如不同的logo、加载动画样式）。

2. 创建服务器中间件 #

在项目根目录新建server-middleware/switch-loading.ts文件，编写中间件逻辑，根据请求的主机名切换对应的loading模板：

import { Request, Response, NextFunction } from 'express'
import fs from 'fs'
import path from 'path'

export default (req: Request, res: Response, next: NextFunction) => {
  // 定义URL与loading文件的映射关系
  const hostLoadingMap = {
    'client-url-1.com': 'loading-client1.html',
    'client-url-2.com': 'loading-client2.html'
  }

  // 获取当前请求的主机名（如果是反向代理部署，可改用req.headers['x-forwarded-host']）
  const currentHost = req.hostname
  // 匹配对应的loading文件，默认用第一个作为兜底
  const targetLoadingFile = hostLoadingMap[currentHost] || 'loading-client1.html'

  // 读取目标loading文件的内容
  const loadingHtml = fs.readFileSync(
    path.resolve(__dirname, '../static', targetLoadingFile),
    'utf-8'
  )

  // 覆盖Nuxt渲染器的loadingIndicator配置
  // @ts-ignore 忽略类型检查，因nuxt对象的类型定义未暴露该属性
  req.nuxt.renderer.options.loadingIndicator = loadingHtml

  next()
}

3. 在nuxt.config.ts中注册中间件 #

将上述中间件添加到serverMiddleware配置中，并设置默认的loadingIndicator作为 fallback：

import fs from 'fs'
import path from 'path'

export default {
  // ...其他配置项
  // 注册服务器中间件
  serverMiddleware: [
    { path: '/', handler: '~/server-middleware/switch-loading.ts' }
  ],
  // 设置默认的loading模板
  loadingIndicator: fs.readFileSync(
    path.resolve(__dirname, './static/loading-client1.html'),
    'utf-8'
  )
}

注意事项 #

• 如果应用部署在反向代理（如Nginx）之后，需要确保代理传递了正确的Host头，或者改用X-Forwarded-Host请求头来判断客户端真实URL。
• 确保loading HTML文件的路径正确，避免出现文件读取失败的情况。

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