Express静态文件服务配置

Question

我正在尝试从Express服务器提供静态资源，该服务器还安装了Apollo服务器，但这是与express.static配置相关的问题。 以下是我的文件夹结构的屏幕截图： 以下是Express配置的代码。它位于/config/app.js中。

import express from 'express';
import bodyParser from 'body-parser';
import morgan from 'morgan';
import cookieParser from 'cookie-parser';
import cors from 'cors';
import path from 'path';

const PORT = process.env.PORT || 3001;
const environment = process.env.NODE_ENV || 'development';
const loggingType = environment === 'development' ? 'dev' : 'tiny';

const app = express();
app.use(
  bodyParser.json({ limit: 1024 * 1024 * 2000, type: 'application/json' })
);
app.use(morgan(loggingType));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, './assets/images')));

export default app;

如果我尝试访问 localhost:3001/images，它会显示无法获取 /images

我做错了什么？

- Tarang Hirani

---

首先，为什么你在这里使用了两个 express.static：app.use(express.static('../assets/images')); 和 app.use('/images', express.static('../assets/images'));。对于同一个目录，只需要使用其中一个即可。 - MiKr13

app.use(express.static(path.join(__dirname, './assets/images'))); 我认为它应该可以工作。 - Nuriddin Kudratov

我刚刚更新了代码和截图。根级别的 index.js 是 Apollo 配置发生的地方。 - Tarang Hirani

添加文档链接以供参考。https://expressjs.com/en/starter/static-files.html - SanSolo

Answer 1

请尝试以下操作：

app.use(‘/assets’, express.static(path.join(__dirname, '..', ‘assets’)));

根据您的目录结构更改path.join的参数。

- dezinezync

Answer 2

您可以以另一种方式使用static函数：

app.use('/', express.static('assets'));

...并像下面的示例一样调用图像：

<img src='/images/logo.png'>

希望这能帮到您。

- Lucas

Answer 3

__dirname 表示当前模块的目录名称。您应该使用 '../assets/images' 作为图像的静态路径。

尝试访问 localhost:3001/images 会返回错误，因为它是一个静态目录，而不是文件。访问 localhost:3001/images/test.png 应该可以。

但首先，您需要定义您的静态目录。而不是：

app.use(express.static(path.join(__dirname, './assets/images')));

做：

app.use('/images', express.static(path.join(__dirname, '..', '/assets/images')));

希望能对你有所帮助！

- atmys

---

__dirname会指向server/config/app.js，对吧？要访问assets文件夹，我需要向外跳出一层，是吗？ - Tarang Hirani

这样做只会公开图像目录，而不是所有资产。 - atmys