我想提供静态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'));
6条答案
按热度按时间iezvtpos1#
对于提供静态文件,您必须使用
useStaticAssets()
而不是setBaseViewsDir()
:当您使用
useStaticAssets
时,您不需要设置控制器,所有文件都将自动提供:假设在
client/dist
下有文件index.html
和pic.jpg
。他们将担任:当你想使用一个视图引擎,比如
hbs
时,需要设置基本视图目录,参见docs。zwghvu4y2#
关于Nest.js的official documentation,应该像这样提供静态文件:
安装所需的软件包:
将app.module.ts更新为如下所示:
l5tcr1uw3#
如果你有这样的东西
在main.ts或main.js中
在app.module.js中
在app.js中
有了这段代码,你可以做到这一点:)
guykilcj4#
如果您决定在“main.ts”或“app.module.ts”中执行此操作(您不需要两者),则最好在“main.ts”中添加“prefix”选项:
或者“app.module.ts”中的“serveRoot”选项:
并将指向静态文件的链接设置为“[your host]/public/[your dir and files]”以将静态路径与其他路径分开。
ajsxfq5m5#
在main.ts中写入
app.useStaticAssets(join(__dirname, '../../client/dist'))
你也可以尝试fastify应用程序:
b1zrtrql6#
我也遇到了同样的问题,我想通过API来服务公共图像,所以我尝试了以下方法:
创建常量配置公用文件夹:
在app.module.ts中添加ServeStaticModule:
为您的镜像创建公共文件夹:
在浏览器中点击URL: