Nestjs中配置静态资源

静态资源是什么呢？例如CSS、JS以及图片等等。下面以在浏览器中访问图片为例来配置静态资源
首先新建一个项目，在其根目录中创建一个public文件夹用于存放静态资源
在这里插入图片描述
为了创建一个简单的 MVC 应用程序，我们必须安装一个模板引擎,命令如下：

 npm install --save hbs

将main.js中的代码改为：

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

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

我们先试试一个简单的配置静态资源目录，代码如下

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets('public');  //配置静态资源目录
  await app.listen(3000);
}
bootstrap();

在这里插入图片描述

这时我们在public文件夹中放入一张图片，并取名为1.png
在这里插入图片描述
这时候我们启动项目，并输入对应的URL就可以看见图片出现在网站中

配置虚拟目录

比如想通过http://localhost:3000/static/1.png来访问public目录里面的文件

代码如下：
app.useStaticAssets(join(__dirname, '…", ‘public’),{
prefix: " /static/. //设置虚拟路径
})

在这里插入图片描述
这时候我们通过URL访问：

通过官方的方法也可以

配置模板引擎

安装对应的模板引擎，比如ejs
安装代码

cnpm i ejs --save

配置模板引擎
app.setBaseViewsDir(join(_dirname,‘…’,‘views’)) //放试图的文件
app.setViewEngine(‘ejs’);
在这里插入图片描述

然后在跟目录中新建一个名为views的文件夹
在这里插入图片描述
因为我们的项目设计到前端和后端，所以新建两个文件夹来区分前后端分别是admin和default

然后我们在default里面新建index.ejs来渲染页面，并添加一些基础的东西

然后需要引入Render装饰器，需要在app.controller.ts中添加并修改代码，如下
在这里插入图片描述