Nuxt3带文件扩展名路由问题：访问图片路径无法显示组件

问题原因 #

你遇到的404和serverMiddleware不生效，核心原因是Nuxt的静态文件处理中间件优先级高于自定义serverMiddleware，访问.jpg后缀路径时，框架会先去public目录查找对应文件，找不到才会走到你的中间件；同时旧配置里的路由参数写法（/images/:id.jpg）在Nuxt的路由匹配逻辑里无法正确解析动态参数。

方案一：用Pages动态路由 + 路由规则（推荐） #

这是最符合Nuxt开发习惯的实现方式：

1. 创建页面组件
   在pages/images/[id].vue创建组件文件，示例内容：

<template>
  <div class="image-viewer">
    <h2>当前图片ID：{{ $route.params.id }}</h2>
    <!-- 根据ID渲染自定义内容，比如加载对应图片或业务组件 -->
    <img :src="`/assets/images/${$route.params.id}.jpg`" alt="图片展示" />
  </div>
</template>

<script setup>
const route = useRoute()
// 可在此添加ID相关业务逻辑，比如请求接口获取图片详情
</script>

2. 配置路由规则
   在nuxt.config.ts中添加routeRules，让.jpg后缀的路径匹配到创建的页面：

export default defineNuxtConfig({
  routeRules: {
    '/images/:id.jpg': { component: '@/pages/images/[id].vue' }
  }
})

访问domain.com/images/123.jpg时，会自动渲染[id].vue组件，$route.params.id会获取到123。

方案二：自定义Nitro中间件（适合底层控制场景） #

如果必须用中间件实现，需要绕过静态文件处理并正确匹配路由：

1. 创建中间件文件
   在server/middleware/images.ts创建中间件：

import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

export default defineEventHandler(async (event) => {
  // 用正则匹配带.jpg后缀的动态ID路径
  const urlMatch = event.node.req.url?.match(/^\/images\/([a-zA-Z0-9]+)\.jpg$/)
  if (!urlMatch) return

  const imageId = urlMatch[1]
  // 渲染自定义Vue组件（也可直接返回HTML字符串）
  const app = createSSRApp({
    template: `<div>图片ID：${imageId}，这是自定义组件内容</div>`
  })
  const html = await renderToString(app)
  
  // 设置响应头为HTML类型
  event.node.res.setHeader('Content-Type', 'text/html')
  return html
})

2. 禁用静态文件自动处理
   在nuxt.config.ts中禁止/images路径的静态文件服务，确保中间件优先触发：

export default defineNuxtConfig({
  nitro: {
    serverAssets: [
      { baseName: 'images', dir: 'public/images', serve: false }
    ]
  }
})

访问对应路径时，会直接触发中间件并返回渲染后的组件内容。

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