Question

我想提供静态HTML文件，这些文件位于Nest项目之外的/dist文件夹中。 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-path错误也不是问题，因为在Express项目中使用了完全相同的文件。

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

在index.html中：

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

当我将dist文件夹放入Nest项目（并修改路径）时，它也不起作用。

我找到了解决方法：

我现在使用快递模块：

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

Answer 1

如果您有类似的东西

/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 2

要提供静态文件，您必须使用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，请参见docs）时，需要设置基本视图目录。

Answer 3

在main.ts中写入app.useStaticAssets(join(__dirname, '../../client/dist'))

此外，您还可以尝试固定应用程序：

import { resolve } from 'path';

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

Answer 4

关于Nest.js的official documentation，应该提供这样的静态文件：

安装所需的软件包：

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

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

我找到了解决方法：

4 个答案: