用express.js的静态文件


212

我想将服务index.html/media子目录作为静态文件提供。索引文件应同时在/index.html/URL处提供。

我有

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

但第二行显然可以处理整个__dirname,包括其中的所有文件(不只是index.htmland media),我不希望这样。

我也试过

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

但是访问基本URL /会导致对web_server/index.html/index.html(双重index.html组件)的请求,这当然会失败。

有任何想法吗?


顺便说一下,我在Express中找不到关于此主题的文档(static()+它的参数)...令人沮丧。也欢迎使用doc链接。


2
从express 4.x开始,express.static()serve-static包中间件处理。您可以在npmjs.com/package/serve-staticgithub.com/expressjs/serve-static中找到其文档。
2015年

有人可以解释“服务器作为静态文件”的含义吗?
阿披(Abhi)

@iLiveInAPineappleUnderTheSea在动态Web应用程序中(例如,使用Express时),页面内容由应用程序创建或生成。另一方面,静态文件是从静态目录层次结构中提供的(大部分)是未经修改的。例如,尽管页面可能会更改,但是图像文件,CSS文件和Javascript文件不会更改。
菲利普卡伦德

Answers:


100

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

在Express 文档中提供静态文件,或更详细的信息serve-static文档中,包括默认的提供行为index.html

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


6
仅供参考,默认情况下它将在该其他目录中提供index.html
TheSteve0 2014年

如果只有一个参数-然后express.static期望一个参数是路径....
塞提

188

如果您有此设置

/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


15
Application.configure()在3.x中被记录为旧版,在4.x中被删除。有关更新的示例,请参见ChrisCantrell的答案。
2015年

谢谢,这
很有帮助

什么是__dirname?它的价值是什么?
阿披(Abhi)

1
最新的快递已经过时了。
John Heeter '17

132

在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是关键字吗?
穆罕默德·法赞

6
它是您的nodejs模块中的全局变量。nodejs.org/docs/latest/api/globals.html#globals_dirname
ChrisCantrell,2014年

7
__dirname实际上不是全局变量,而是每个模块的局部变量。
Mohammad Faizan khan 2014年

2
这是与python一起__file__使用的等效工具os.path.dirname(os.path.realpath(__file__))
Abdelouahab 2014年

@ChrisCantrell如果我有文件,如何添加到静态文件夹public/teams/logo.png
michal

37

res.sendFileexpress.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客户端代码所在的文件夹在哪里

作为建议通过@ATOzTOA由澄清 @Vozziepath.join采取的路径加入作为参数时,+通过一个单一的参数路径。


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

@ATOzTOA您能解释更多吗
Mohammed Zameer '18

什么@ATOzTOA要说的是,你应该改变path.join(public + 'index.html')path.join(public, 'index.html')虽然它,改变__dirname + "/public/"path.join(__dirname, 'public')
Vozzie

这帮助我将静态网站与API
完美地

4
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')
})

2

npm install serve-index

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 );
})

2

在app.js中使用以下内容

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

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.