NestJS+Vue单仓库架构下Vue Admin页面刷新404问题求助

核心原因 #

刷新/admin/about这类Vue路由时返回404，是因为NestJS会优先匹配服务端路由，找不到对应路由时会尝试读取静态文件，而不是把请求交给Vue Router的客户端路由逻辑处理。我们需要添加一个fallback路由，让所有未匹配到API/主页面的/admin/*请求都返回Vue的index.html，由Vue Router接管路由解析。

步骤1：配置Vue Router的History模式 #

确保Vue Admin项目的路由使用history模式，并设置正确的base路径（对应NestJS的静态资源前缀）：

// Vue项目/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Dashboard },
  { path: '/about', component: About },
  // 其他Admin路由...
];

const router = createRouter({
  // base路径必须和NestJS静态资源前缀一致
  history: createWebHistory('/admin/'),
  routes,
});

export default router;

步骤2：调整NestJS静态资源配置 #

在main.ts中配置fastify-static时，指定静态资源的前缀为/admin/，确保NestJS能正确映射Vue的构建产物：

// NestJS项目/src/main.ts
import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { AppModule } from './app.module';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );

  // 配置Vue Admin静态资源：指向dist目录，前缀为/admin/
  app.useStaticAssets({
    root: join(__dirname, '..', 'dist'), // 根据实际项目结构调整dist路径
    prefix: '/admin/', // 末尾斜杠不能省略
  });

  // 其他配置（CORS、全局管道等）...

  await app.listen(3000);
}
bootstrap();

步骤3：添加Admin路由Fallback控制器 #

创建一个控制器，添加通配符路由，让所有/admin/*的未匹配请求返回Vue的index.html：

// NestJS项目/src/app.controller.ts
import { Controller, Get, Res } from '@nestjs/common';
import { Response } from 'fastify';
import { join } from 'path';

@Controller()
export class AppController {
  // 主页面路由：匹配/<page>，渲染Twig模板
  @Get(':page')
  renderMainPage(@Param('page') page: string, @Res() res: Response) {
    // 这里写渲染Twig模板的逻辑，比如：
    // return res.render(`${page}.twig`);
  }

  // Admin路由Fallback：匹配所有/admin/xxx路径
  @Get('admin/*')
  serveAdminSpa(@Res() res: Response) {
    return res.sendFile('index.html', {
      root: join(__dirname, '..', 'dist'), // 和静态资源配置的root一致
    });
  }
}

关键注意事项 #

1. 路由顺序优先级：NestJS按路由注册顺序匹配，必须确保API路由（前缀/api）、主页面路由（/:page）先于Admin fallback路由（admin/*）注册，否则fallback会拦截其他合法请求。
2. 路径一致性：Vue Router的base、NestJS静态资源的prefix、fallback路由的路径必须保持一致，都以/admin/结尾。
3. 构建Vue项目：每次修改Vue代码后，必须执行npm run build生成最新的dist目录，否则NestJS无法加载更新后的静态资源。

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