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

我想提供静态 HTML 文件，这些文件位于/distNest 项目外部的文件夹。index.html加载成功但无法加载任何 JS 文件（404 error).

我有一个 Node/Express.js 项目，它使用

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

它工作得很好。

然而，在 Nest 项目中，

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

没有成功。

In the AppController I tried

import { Response } from 'express';

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

但没有运气。

如前所述，index.html已加载成功。所以问题不在于路径错误。问题也不是错误的 src-pathsindex.html因为在 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'));

要提供静态文件，您必须使用useStaticAssets()代替setBaseViewsDir():

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

当你使用useStaticAssets您不需要设置控制器，您的所有文件都会自动提供：

咱们说下client/dist你有文件index.html and pic.jpg。 他们将担任：

localhost:3000 -> index.html
localhost:3000/pic.jpg -> pic.jpg

当您想使用视图引擎时，需要设置基本视图目录，例如hbs, see docs https://docs.nestjs.com/techniques/mvc.