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

我想为嵌套项目之外的

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

---

要提供静态文件，您必须使用

usesticassets（）

而不是

setBaseViewsDir（）

：

---

当您使用

useStaticAssets

时，您不需要设置控制器，所有文件都将自动提供：

假设在

client/dist

下有文件

index.html

和

pic.jpg

。 它们将作为：

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

---

---

当您想使用视图引擎（例如

hbs

）时，需要设置基本视图目录，请参阅

您也可以尝试使用fastify应用程序：

import { resolve } from 'path';

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

关于Nest.js的版本，应该提供如下静态文件：

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

安装所需的软件包：

npm install --save @nestjs/serve-static

更新为如下所示：

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

从'@nestjs/common'导入{Module}；
从“./app.controller”导入{AppController}；
从“/app.service”导入{AppService}；
从'@nestjs/service static'导入{ServeStaticModule}；
从“路径”导入{join}；
@模块({
进口：[
ServeStaticModule.forRoot({
rootPath:join（uu dirname，…，，，，，，，，/，如果您有类似的内容

/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() {
  }
}

使用此代码，您可以完成以下操作：）：）：）
这是不正确的。当你使用
useStaticAssets
时，你不需要任何控制器。文件将自动提供，
index.html
将在根路径下访问。仍然有问题吗？：-）@KimKern不，谢谢。我能够用上面提到的解决方案解决它：-）很高兴听到你在gene中解决了它RAR，考虑将您的解决方案添加为答案，而不是更新您的问题，以便其他人可以从中获益。然后您可以接受您的答案，以显示其他问题已经解决。在这种情况下，我建议使用嵌套API而不是本机Express API，参见我的解决方案。回答：这让我大吃一惊。谢谢！
@Controller()
@Dependencies(AppService)
export class AppController {
  constructor(appService) {
    this.appService = appService;
  }

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