带有 express.js 的静态文件

Posted 2023-02-27

【中文标题】带有 express.js 的静态文件

【英文标题】：static files with express.js

【发布时间】：2012-05-13 02:56:53

【问题描述】：

我想将index.html 和/media 子目录作为静态文件提供。索引文件应在/index.html 和/ URL 上提供。

我有

web_server.use("/media", express.static(__dirname + '/media'));
web_server.use("/", express.static(__dirname));

但第二行显然服务于整个__dirname，包括其中的所有文件（不仅仅是index.html 和media），这是我不想要的。

我也试过

web_server.use("/", express.static(__dirname + '/index.html'));

但是访问基本 URL / 然后会导致对 web_server/index.html/index.html 的请求（双 index.html 组件），这当然会失败。

有什么想法吗？

---

顺便说一句，我在 Express 中完全找不到关于这个主题的文档（static() + 它的参数）......令人沮丧。也欢迎提供文档链接。

【问题讨论】：

从 express 4.x 开始，express.static() 由 serve-static 包中间件处理。您可以在 npmjs.com/package/serve-static 或 github.com/expressjs/serve-static 找到它的文档。

有人能解释一下“服务器作为静态文件”是什么意思吗？

@iLiveInAPineappleUnderTheSea 在动态 Web 应用程序中，例如在使用 Express 时，页面内容由应用程序创建或生成。另一方面，静态文件（大部分）未从静态目录层次结构中修改。例如，虽然页面可能会发生变化，但图像文件、CSS 文件和 javascript 文件不会发生变化。

查看下方链接only4ututorials.blogspot.com/2017/05/…

在这里我出于类似目的制作了一个视频。它使用 express 和 serve-index 来制作完整的局域网文件共享解决方案。 youtu.be/4S6doMsaT78

【参考方案1】：

如果你有复杂的文件夹结构，比如

- application
     - assets
         - images
             - profile.jpg
     - web
     - server
        - index.js

如果您想从index.js 服务assets/images

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

从浏览器查看

http://localhost:4000/images/profile.jpg

如果您需要更多澄清评论，我会详细说明。

【讨论】：

最好的答案！

【参考方案2】：

这是我提供 HTML 文件链接时的错误。

之前：

<link rel="stylesheet" href="/public/style.css">

之后：

<link rel="stylesheet" href="/style.css">

我刚刚从链接中删除了静态目录路径，错误就消失了。这解决了我的错误还有一件事不要忘记将此行放在您正在创建服务器的位置。

var path = require('path');
app.use(serveStatic(path.join(__dirname, 'public')));

【参考方案3】：

我会在express docs 上添加一些内容，但有时会在教程或其他内容中误读。

app.use(mountpoint, middleware) 

mountpoint 是一个虚拟路径，它不在文件系统中（即使它确实存在）。中间件的挂载点是app.js 文件夹。

现在

app.use('/static', express.static('public')`

将路径/static/hell/meow/a.js的文件发送到/public/hell/meow/a.js

【参考方案4】：

express.static() 期望第一个参数是目录的路径，而不是文件名。我建议创建另一个子目录来包含您的 index.html 并使用它。

在 Express documentation 或 more detailed serve-static documentation 中提供静态文件，包括 default behavior of serving index.html：

默认情况下，此模块将发送“index.html”文件以响应对目录的请求。要禁用此设置 false 或提供新索引，请按首选顺序传递字符串或数组。

【讨论】：

仅供参考，默认情况下它将在该其他目录中提供 index.html

如果只有一个参数 - 那么express.static 期望一个参数是路径....

【参考方案5】：

const path = require('path');

const express = require('express');

const app = new express();
app.use(express.static('/media'));

app.get('/', (req, res) => 
    res.sendFile(path.resolve(__dirname, 'media/page/', 'index.html'));
);

app.listen(4000, () => 
    console.log('App listening on port 4000')
)

【参考方案6】：

在你的 app.js 中使用下面

app.use(express.static('folderName'));

（folderName 是包含文件的文件夹）- 请记住，这些资产是通过服务器路径直接访问的（即 http://localhost:3000/abc.png（其中 abc.png 在 folderName 文件夹内）

【参考方案7】：

res.sendFile 和express.static 都可以解决这个问题

var express = require('express');
var app = express();
var path = require('path');
var public = path.join(__dirname, 'public');

// viewed at http://localhost:8080
app.get('/', function(req, res) 
    res.sendFile(path.join(public, 'index.html'));
);

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

app.listen(8080);

public 是客户端代码所在的文件夹

由于suggested by @ATOzTOA 和clarified by @Vozzie，path.join 将要连接的路径作为参数，+ 将单个参数传递给路径。

【讨论】：

path.join 将要加入的路径作为参数，+ 将单个参数传递给路径。

@ATOzTOA 你能解释一下吗

@ATOzTOA 的意思是你应该将path.join(public + 'index.html') 更改为path.join(public, 'index.html') 并同时将__dirname + "/public/" 更改为path.join(__dirname, 'public')

这帮助我将静态网站与 API 合二为一

【参考方案8】：

npm install 服务索引

var express    = require('express')
var serveIndex = require('serve-index')
var path = require('path')
var serveStatic = require('serve-static')
var app = express()
var port = process.env.PORT || 3000;
/**for files */
app.use(serveStatic(path.join(__dirname, 'public')));
/**for directory */
app.use('/', express.static('public'), serveIndex('public', 'icons': true))

// Listen
app.listen(port,  function () 
  console.log('listening on port:',+ port );
)

【参考方案9】：

如果你有这个设置

/app
   /public/index.html
   /media

那么这应该得到你想要的

var express = require('express');
//var server = express.createServer();
// express.createServer()  is deprecated. 
var server = express(); // better instead
server.configure(function()
  server.use('/media', express.static(__dirname + '/media'));
  server.use(express.static(__dirname + '/public'));
);

server.listen(3000);

诀窍是将此行作为最后的后备

  server.use(express.static(__dirname + '/public'));

至于文档，由于 Express 使用连接中间件，我发现直接查看连接源代码更容易。

例如，这一行表明 index.html 是受支持的 https://github.com/senchalabs/connect/blob/2.3.3/lib/middleware/static.js#L140

【讨论】：

Application.configure() 在 3.x 中被记录为旧版，并在 4.x 中被删除。有关更新示例，请参阅 ChrisCantrell 的回答。

谢谢，帮了大忙

__dirname 是什么？它的价值是什么？

过时的最新快递。

【参考方案10】：

在最新版本的 express 中，“createServer”已被弃用。这个例子对我有用：

var express = require('express');
var app = express();
var path = require('path');

//app.use(express.static(__dirname)); // Current directory is root
app.use(express.static(path.join(__dirname, 'public'))); //  "public" off of current is root

app.listen(80);
console.log('Listening on port 80');

【讨论】：

__dirname 是关键字？

它是你的 nodejs 模块中的一个全局变量。 nodejs.org/docs/latest/api/globals.html#globals_dirname

__dirname 实际上不是全局的，而是每个模块的本地。

这是在 python 中的 __file__ 等价物，您可以与 os.path.dirname(os.path.realpath(__file__)) 一起使用

@ChrisCantrell 如果我在public/teams/logo.png 中有文件，如何添加到静态文件夹？