NestJs 静态目录配置详解

请允许我详细讲解 NestJs 静态目录配置的完整攻略。

1. 什么是静态目录

静态目录是指在NestJs应用程序中设置的具有静态资源的目录，例如图像，CSS文件，JavaScript脚本等。实际上，静态目录就是通过HTTP服务器直接提供静态文件的地方。

2. 如何配置静态目录

在 NestJs 中，配置静态目录主要包含两个步骤：

2.1 安装静态资源包

在 NestJs 中，我们可以使用一个叫做 @nestjs/serve-static 的包来处理托管静态文件。请使用 npm 安装该包：

npm install --save @nestjs/serve-static

2.2 配置静态目录

在 NestJs 中，我们可以使用 app.useStaticAssets() 包方法来指定我们保管静态资源文件的目录。具体代码如下：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { join } from 'path';
import { NestExpressApplication } from '@nestjs/platform-express';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets(join(__dirname, 'public'));
  await app.listen(3000);
}
bootstrap();

在这段代码中，我们定义了一个 NestJs 应用程序实例，并增加了一个 app.useStaticAssets() 的链式方法来通知应用程序知道我们将保管的静态文件目录。在这个例子中，我们将静态资源文件保管在根目录下的 public 文件夹中。

我们也可以使用 app.use() 方法来定义自己的资源文件 path，具体代码如下：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { join } from 'path';
import { NestExpressApplication } from '@nestjs/platform-express';
import * as express from 'express';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.use('/files', express.static(join(__dirname, '../public')));
  await app.listen(3000);
}
bootstrap();

在这个例子中，我们定义了一个 NestJs 应用程序实例，并使用了 app.use() 方法，用于定义自己的静态资源文件目录 path。

3. 示例说明

下面我们来实际应用一下上述配置静态目录的步骤。

3.1 示例1：保管图片文件的静态目录

假设我们有一个 NestJs 应用程序，需要展示一些海报图片。我们可以将这些海报图片保管在。

./public/images/

这个路径下，静态图片的路径可以是相对路径或绝对路径。我们可以在代码中这样使用 app.useStaticAssets() 方法：

app.useStaticAssets(join(__dirname, '..', 'public', 'images'));

3.2 示例2：保管 CSS 和 JavaScript 文件的静态目录

假设我们有一个 NestJs 应用程序，需要使用一些 CSS 和 JavaScript 文件。同样地，我们可以将所有 CSS 文件和 JavaScript 文件放在统一的静态目录下，例如：

./public/assets/css/
./public/assets/js/

我们可以在代码中这样使用 app.use() 方法：

app.use('/css', express.static(join(__dirname, '..', 'public', 'assets', 'css')));
app.use('/js', express.static(join(__dirname, '..', 'public', 'assets', 'js')));

以上便是关于 NestJs 静态目录配置的详细攻略，希望对你有所帮助！