NestJS - 静态文件静态文件在 NestJS 中，静态文件通常放置在一个名为 public 或类似的目录中，并通

静态文件

在 NestJS 中，静态文件通常放置在一个名为 public 或类似的目录中，并通过配置 ServeStaticModule 模块来托管这些文件。以下是操作步骤：

1. 创建目录存放静态文件

在项目根目录下创建一个 public 文件夹（文件夹名可自定义），并将静态文件（如 HTML、CSS、JS、图片等）放入其中。

例如：

project-root/
├── src/
├── public/
│   ├── index.html
│   ├── styles.css
│   └── logo.png
├── package.json
└── main.ts

2. 安装依赖

如果项目中未安装 @nestjs/serve-static 模块，首先安装：

npm install @nestjs/serve-static

3. 配置 `ServeStaticModule`

在应用的主模块（如 AppModule）中引入并配置 ServeStaticModule：

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'), // 指定静态文件目录
    }),
  ],
})
export class AppModule {}

4. 访问静态文件

启动项目后，静态文件可以通过对应的 URL 直接访问。例如：

如果 rootPath 配置指向 public 文件夹，并且文件路径是 public/logo.png，访问地址为 http://localhost:3000/logo.png。

5. 自定义路径（可选）

如果需要将静态文件托管在自定义路径下，可以通过配置 serveRoot：

ServeStaticModule.forRoot({
  rootPath: join(__dirname, '..', 'public'),
  serveRoot: '/static', // 设置访问前缀
});

此时访问地址为：http://localhost:3000/static/logo.png。

6. 配置多个静态目录（可选）

如果有多个静态资源文件夹，可以配置多个：

ServeStaticModule.forRoot(
  [
    {
      rootPath: join(__dirname, '..', 'public'),
      serveRoot: '/public',
    },
    {
      rootPath: join(__dirname, '..', 'assets'),
      serveRoot: '/assets',
    },
  ],
);

这样，可以分别通过 /public 和 /assets 访问不同的资源目录。

完成上述配置后，NestJS 就可以正确地服务静态文件了。

NestJS - 静态文件