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

piv4azn7  于 2023-10-14  发布在  Java
关注(0)|答案(6)|浏览(191)

我想提供静态HTML文件,这些文件位于Nest项目外部的/dist文件夹中。index.html加载成功,但无法加载任何JS文件(404错误)。
我有一个Node.js项目,它使用

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

它工作得很好
然而,在Nest项目中,

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

不管用
AppController中,我尝试

  1. import { Response } from 'express';
  2. @Get()
  3. get(@Res() res: Response) {
  4. res.sendFile('index.html', {
  5. root: '../client/dist',
  6. });
  7. }

但没找到。
如前所述,index.html成功加载。所以问题不在于一条错误的道路。index.html中的错误src路径也不是问题,因为在Express项目中使用了完全相同的文件。

  1. /dist
  2. |-index.html
  3. |-main.js
  4. |-etc.

在index.html中:

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

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

我找到了解决方案:

我现在使用express模块:

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

iezvtpos1#

对于提供静态文件,您必须使用useStaticAssets()而不是setBaseViewsDir()

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

当您使用useStaticAssets时,您不需要设置控制器,所有文件都将自动提供:
假设在client/dist下有文件index.htmlpic.jpg。他们将担任:

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

当你想使用一个视图引擎,比如hbs时,需要设置基本视图目录,参见docs

zwghvu4y

zwghvu4y2#

关于Nest.js的official documentation,应该像这样提供静态文件:
安装所需的软件包:

  1. npm install --save @nestjs/serve-static

app.module.ts更新为如下所示:

  1. import { Module } from '@nestjs/common';
  2. import { AppController } from './app.controller';
  3. import { AppService } from './app.service';
  4. import { ServeStaticModule } from '@nestjs/serve-static';
  5. import { join } from 'path';
  6. @Module({
  7. imports: [
  8. ServeStaticModule.forRoot({
  9. rootPath: join(__dirname, '..', 'client'), // <-- path to the static files
  10. }),
  11. ],
  12. controllers: [AppController],
  13. providers: [AppService],
  14. })
  15. export class AppModule {}
展开查看全部
l5tcr1uw

l5tcr1uw3#

如果你有这样的东西

  1. /public
  2. |-index.html
  3. |-main.js
  4. |-etc.
  5. /src
  6. |-app.controller.js
  7. |-app.module.js
  8. |-main.js

在main.ts或main.js中

  1. async function bootstrap() {
  2. const app = await NestFactory.create(AppModule);
  3. app.useStaticAssets(join(__dirname, '..', 'public'));
  4. app.setViewEngine('html');
  5. await app.listen(5000);
  6. }
  7. bootstrap();

在app.module.js中

  1. @Module({
  2. imports:
  3. [
  4. ServeStaticModule.forRoot({
  5. rootPath: join(__dirname, '..', 'public'),
  6. exclude: ['/api*'],
  7. }),
  8. ],
  9. controllers: [AppController],
  10. providers: [AppService],
  11. })
  12. export class AppModule {}

在app.js中

  1. @Controller()
  2. @Dependencies(AppService)
  3. export class AppController {
  4. constructor(appService) {
  5. this.appService = appService;
  6. }
  7. @Get()
  8. @Render('index')
  9. root() {
  10. }
  11. }

有了这段代码,你可以做到这一点:)

展开查看全部
guykilcj

guykilcj4#

如果您决定在“main.ts”“app.module.ts”中执行此操作(您不需要两者),则最好在“main.ts”中添加“prefix”选项:

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

或者“app.module.ts”中的“serveRoot”选项:

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

并将指向静态文件的链接设置为“[your host]/public/[your dir and files]”以将静态路径与其他路径分开。

ajsxfq5m

ajsxfq5m5#

在main.ts中写入app.useStaticAssets(join(__dirname, '../../client/dist'))
你也可以尝试fastify应用程序:

  1. import { resolve } from 'path';
  2. app.useStaticAssets({
  3. root: resolve("./build")
  4. });
b1zrtrql

b1zrtrql6#

我也遇到了同样的问题,我想通过API来服务公共图像,所以我尝试了以下方法:

创建常量配置公用文件夹:

  1. // src\constants\constant.ts
  2. export const PUBLIC_IMAGES = 'public/images';

在app.module.ts中添加ServeStaticModule:

  1. // src\app.module.ts
  2. import { Module } from '@nestjs/common';
  3. import { ServeStaticModule } from '@nestjs/serve-static';
  4. import { join } from 'path';
  5. import { PUBLIC_IMAGES } from './constants/constant';
  6. @Module({
  7. imports: [
  8. ServeStaticModule.forRoot({
  9. serveRoot: '/public',
  10. rootPath: join(__dirname, '..', PUBLIC_IMAGES),
  11. })
  12. ],
  13. controllers: [],
  14. providers: [ ],
  15. })
  16. export class AppModule {}

为您的镜像创建公共文件夹:

  1. root->public\images\myImage.png

在浏览器中点击URL:

  1. http://localhost:3010/public/myImage.png
展开查看全部

相关问题