Express-js无法获取我的静态文件，为什么？

Question

我已将我的代码简化为最简单的express-js应用程序：

var express = require("express"),
    app = express.createServer();
app.use(express.static(__dirname + '/styles'));
app.listen(3001);

我的目录看起来像这样：

static_file.js
/styles
  default.css

然而，当我访问http://localhost:3001/styles/default.css时，我会收到以下错误：

Cannot GET / styles /
default.css

我正在使用express 2.3.3和node 0.4.7。我做错了什么？

- Kit Sunde

---

请查看以下链接：http://only4ututorials.blogspot.com/2017/05/how-to-serve-static-file-in-express-js.html - Dexter

Answer 1

尝试使用 http://localhost:3001/default.css。

要在请求URL中包含/styles，请使用：

app.use("/styles", express.static(__dirname + '/styles'));

请查看这个页面上的示例：

//Serve static content for the app from the "public" directory in the application directory.

    // GET /style.css etc
    app.use(express.static(__dirname + '/public'));

// Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".

    // GET /static/style.css etc.
    app.use('/static', express.static(__dirname + '/public'));

- Giacomo

---

如果是新安装，您应该验证您的express模块是否正确安装（http://expressjs.com/en/starter/installing.html），然后像Giacomo所说的那样检查路径和目录名称 ;) - Spl2nky

请始终使用path.join来解决跨平台目录分隔符问题。path.join(__dirname, '/') - Doug Chamberlain

在“生产环境”中，Express 的挂载路径是否有意义，还是只是开发时的测试问题？也许在 URL 中添加一个文件夹会更有条理。 - Timo

如果有使用 TypeScript（或其他语言）的开发者遇到同样的问题：如果你的文件位于 src/ 目录下，可以使用 path.join(__dirname, "../public")。 - deb

没有指定路径的app.use()不应该处理所有请求吗？那么为什么app.use(express.static(__dirname + '/public'));不能用于/static呢？ - Robert Page

Answer 2

我有同样的问题。我用以下代码解决了这个问题：

app.use('/img',express.static(path.join(__dirname, 'public/images')));
app.use('/js',express.static(path.join(__dirname, 'public/javascripts')));
app.use('/css',express.static(path.join(__dirname, 'public/stylesheets')));

静态请求示例：

http://pruebaexpress.lite.c9.io/js/socket.io.js

我需要一个更简单的解决方案。有这样的吗？

- David Miró

---

感谢您分享解决方案，无论它是否最优。如果您想重新打开问题以进行优化，请考虑发布一个详细描述新情况的新问题。如果优化是唯一目的，则该问题可能更适合SO代码审查。 - user4039065

在我的情况下，使静态导入与expressjs一起工作的唯一方法是使用“path”模块。所有其他解决方案，如果没有使用path.join或在字符串__dirname之前添加前缀，则都是徒劳的。 - Marco Faustinelli

Answer 3

这对我有效：

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));

- Apichai

Answer 4

default.css 应该在 http://localhost:3001/default.css 上可用。

app.use(express.static(__dirname + '/styles')); 中的 styles 只是告诉 express 在 styles 目录中查找静态文件以提供服务。它不会（令人困惑地）成为可用路径的一部分。

- diff_sky

---

当然！按照惯例，在express.js中，您可以在“/public”文件夹中进行操作，该文件夹包含“css”，“js”和“img”文件夹，因此您可以通过“http://localhost:3001/css/default.css”访问它 :) - Kit Sunde

Answer 5

在你的 server.js 文件中：

var express   =     require("express");
var app       =     express();
app.use(express.static(__dirname + '/public'));

你已经单独声明了express和app，创建一个名为“public”的文件夹或您喜欢的其他名称，并且您可以访问这些文件夹。在您的模板src中，您已经添加了从/public（或您的文件夹名称）到静态文件的相对路径。请注意路由上的斜杠。

- Baurin Leza

Answer 6

我在我的应用程序中使用了Bootstrap CSS、JS和字体。我在应用程序的根目录下创建了一个名为asset的文件夹，并将所有这些文件夹放在里面。然后在服务器文件中添加了以下行：

app.use("/asset",express.static("asset"));

这行代码使我能够从路径前缀为/asset的位置，比如：http://localhost:3000/asset/css/bootstrap.min.css中加载在asset目录下的文件。

现在，在视图中我可以像下面这样简单地包含CSS和JS：

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">

- arshovon

---

这是一份对我非常有用并且解释得很好的答案。+1 感谢您花费精力进行详细阐述，并给出一个可行的示例。上一次我在之前的项目中遇到了同样的问题，只是靠运气解决了，但今天当我在另一个新项目中遇到相似问题时，因为您答案中详细的解释，我现在明白该如何处理了。 - Joseph

Answer 7

以下是我的建议：

您可以在app.js中将app.use(express.static(__dirname + 'public/images'));替换为更简单的app.use(express.static('public/images'));

即移除路径中的根目录名称。然后，您可以在其他js文件中有效地使用静态路径，例如：

<img src="/images/misc/background.jpg">

希望这可以帮到您 :)

- Amir Aslam

---

这解决了我的问题。在我的代码中，使用__dirname拼接路径（使用path.join）的CSS路径工作得很好，而获取JS则失败了。 - Chim

Answer 8

仅需两步即可提供静态文件（CSS、图像、JS文件）：

1. pass the directory of css files to built in middleware express.static

   var express = require('express');
   var app = express();
   /*public is folder in my project directory contains three folders
   css,image,js
   */
   //css  =>folder contains css file
   //image=>folder contains images
   //js   =>folder contains javascript files
   app.use(express.static( 'public/css'));
   

2. to access css files or images just type in url http://localhost:port/filename.css ex:http://localhost:8081/bootstrap.css

注意: 要将CSS文件链接到HTML，只需键入<link href="file_name.css" rel="stylesheet">

如果我写下这段代码

var express = require('express');
var app = express();
app.use('/css',express.static( 'public/css'));

要访问静态文件，只需在url中键入：localhost:port/css/filename.css 例如：http://localhost:8081/css/bootstrap.css

注意：要将css文件与html链接，只需添加以下行：

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

- Ahmed Mahmoud

Answer 9

这个对我有效。

app.use(express.static(path.join(__dirname, 'public')));

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

app.use('/shopping-cart/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

app.use('/shopping-cart/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

app.use('/user/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

app.use('/user/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

- james gicharu

Answer 10

我正在使用

app.use(express.static('public'))

当公共文件夹中没有名为index.html的文件时，浏览器会出现以下错误：

"Cannot GET /"

将文件名更改为'index.html'后，问题得到解决。

- Khalil Ahmad