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

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

我想提供静态HTML文件,这些文件位于Nest项目外部的/dist文件夹中。index.html加载成功,但无法加载任何JS文件(404错误)。
我有一个Node.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>

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

我找到了解决方案:

我现在使用express模块:

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

iezvtpos1#

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

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

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

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

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

zwghvu4y

zwghvu4y2#

关于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 {}
l5tcr1uw

l5tcr1uw3#

如果你有这样的东西

/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.js中

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

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

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

guykilcj

guykilcj4#

如果您决定在“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'),
}),

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

ajsxfq5m

ajsxfq5m5#

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

import { resolve } from 'path';

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

b1zrtrql6#

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

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

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

在app.module.ts中添加ServeStaticModule:

// src\app.module.ts
import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
import { PUBLIC_IMAGES } from './constants/constant';

@Module({
 imports: [
  ServeStaticModule.forRoot({
   serveRoot: '/public',
   rootPath: join(__dirname, '..', PUBLIC_IMAGES),
  })
 ],
 controllers: [],
 providers: [ ],
})

export class AppModule {}

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

root->public\images\myImage.png

在浏览器中点击URL:

http://localhost:3010/public/myImage.png

相关问题