如何在 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-paths 錯誤，因為在 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

要提供靜態文件，您必須使用useStaticAssets()而不是setBaseViewsDir() ：

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

---

當您使用useStaticAssets您不需要設置控制器，您的所有文件都將自動提供：

假設在client/dist你有文件index.html和pic.jpg 。 他們將擔任：

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

---

當您想使用像hbs這樣的視圖引擎時，需要設置基本視圖目錄，請參閱文檔。

Answer 2

關於 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 {}

Answer 3

如果你有這樣的事情

/public
  |-index.html
  |-main.js
  |-etc.
/src
  |-app.controller.js
  |-app.module.js
  |-main.js

在 main.ts 或 main.js

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setViewEngine('html');

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

在 app.module.js 中

@Module({
  imports: 
  [ 
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),
      exclude: ['/api*'],
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

在 app.controller.js 中

@Controller()
@Dependencies(AppService)
export class AppController {
  constructor(appService) {
    this.appService = appService;
  }

  @Get()
  @Render('index')
  root() {
  }
}

使用此代碼，您可以解決問題:) :) :)

Answer 4

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

您也可以嘗試使用 fastify 應用程序：

import { resolve } from 'path';

app.useStaticAssets({
    root: resolve("./build")
});

Answer 5

如果您決定在“main.ts”或“app.module.ts”中執行（您不需要兩者都需要），最好在“main.ts”中添加“prefix”選項：

app.useStaticAssets(join(__dirname, '..', 'public'), {prefix: '/public'});

或者“app.module.ts”中的“serveRoot”選項：

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

並將您的靜態文件的鏈接設為“[您的主機]/public/[您的目錄和文件]”以將您的靜態路徑與其他路徑分開。