javascript - 如何在 Nest.js 中提供静态 HTML 文件？

Question

我想提供位于 Nest 项目之外的 /dist 文件夹中的静态 HTML 文件。 index.html 已成功加载，但无法加载任何 JS 文件(404 错误)。

我有一个使用

的 Node/Express.js 项目

app.use('/', express.static('../client/dist'))

而且它工作得很好。

然而，在 Nest 项目中，

app.setBaseViewsDir(join(__dirname, '../../client/dist'))

不成功。

在 AppController 我试过了

import { Response } from 'express';

@Get()
  get(@Res() res: Response) {
    res.sendFile('index.html', {
      root: '../client/dist',
    });
  }

但没有运气。

如前所述，index.html 已成功加载。所以问题不是错误的路径。问题也不是 index.html 中错误的 src 路径，因为在 Express 项目中使用了完全相同的文件。

/dist
  |-index.html
  |-main.js
  |-etc.

在 index.html 中:

<script type="text/javascript" src="main.js"></script>

当我将 dist 文件夹放入 Nest 项目(并调整路径)时，它也不起作用。

我找到了解决方案:

我现在使用 express 模块:

import * as express from 'express';
...
app.use('/', express.static('../client/dist'));

Answer 1

关于 official documentation Nest.js 应该像这样提供静态文件:

安装所需的包:

npm install --save @nestjs/serve-static

更新app.module.ts看起来像这样:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'client'),   // <-- path to the static files
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}