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

Express-js can't GET my static files, why?

提问by Kit Sunde

I've reduced my code to the simplest express-js app I could make:

我已经将我的代码简化为我可以制作的最简单的 express-js 应用程序：

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

My directory look like this:

我的目录是这样的：

static_file.js
/styles
  default.css

Yet when I access http://localhost:3001/styles/default.cssI get the following error:

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

Cannot GET / styles /
default.css

I'm using express 2.3.3and node 0.4.7. What am I doing wrong?

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

回答by Giacomo

Try http://localhost:3001/default.css.

试试http://localhost:3001/default.css。

To have /stylesin your request URL, use:

要/styles在您的请求 URL 中使用，请使用：

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

Look at the examples on this page:

看看这个页面上的例子：

//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'));

回答by David Miró

I have the same problem. I have resolved the problem with following code:

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

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

Static request example:

静态请求示例：

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

I need a more simple solution. Does it exist?

我需要一个更简单的解决方案。它存在吗？

回答by diff_sky

default.cssshould be available at http://localhost:3001/default.css

default.css应该可以在 http://localhost:3001/default.css

The stylesin app.use(express.static(__dirname + '/styles'));just tells express to look in the stylesdirectory for a static file to serve. It doesn't (confusingly) then form part of the path it is available on.

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

回答by user3418903

This work for me:

这对我有用：

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

回答by Baurin Leza

In your server.js :

在你的 server.js 中：

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

You have declared express and app separately, create a folder named 'public' or as you like, and yet you can access to these folder. In your template src, you have added the relative path from /public (or the name of your folder destiny to static files). Beware of the bars on the routes.

您已经分别声明了 express 和 app，创建了一个名为“public”或您喜欢的文件夹，但您可以访问这些文件夹。在您的模板 src 中，您添加了来自 /public 的相对路径（或您的文件夹命运的名称到静态文件）。当心路线上的酒吧。

回答by Amir Aslam

What worked for me is:

对我有用的是：

Instead of writing app.use(express.static(__dirname + 'public/images'));in your app.js

而不是写 app.use(express.static(__dirname + 'public/images'));在你的 app.js

Simply write app.use(express.static('public/images'));

简单地写 app.use(express.static('public/images'));

i.e remove the root directory name in the path. And then you can use the static path effectively in other js files, For example:

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

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

Hope this helps :)

希望这可以帮助 ：）

回答by arsho

I am using Bootstrap CSS, JS and Fonts in my application. I created a folder called assetin root directory of the app and place all these folder inside it. Then in server file added following line:

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

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

This line enables me to load the files that are in the assetdirectory from the /assetpath prefix like: http://localhost:3000/asset/css/bootstrap.min.css.

这一行使我能够asset从/asset路径前缀加载目录中的文件，例如：http://localhost:3000/asset/css/bootstrap.min.css.

Now in the views I can simply include CSS and JS like below:

现在在视图中，我可以简单地包含 CSS 和 JS，如下所示：

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

回答by Ahmed Mahmoud

to serve static files (css,images,js files)just two steps:

提供静态文件（css、images、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.cssex:http://localhost:8081/bootstrap.css

1. 将 css 文件目录传递给内置中间件 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. 要访问 css 文件或图像，只需输入 url http://localhost:port/filename.css例如：http://localhost:8081/bootstrap.css

note:to link css files to html just type<link href="file_name.css" rel="stylesheet">

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

if i write this code

如果我写这段代码

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

to access the static files just type in url:localhost:port/css/filename.css ex:http://localhost:8081/css/bootstrap.css

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

noteto link css files with html just add the following line

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

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

回答by james gicharu

this one worked for me

这个对我有用

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

回答by Bren

I find my css file and add a route to it:

我找到了我的 css 文件并添加了一个路由：

app.get('/css/MyCSS.css', function(req, res){
  res.sendFile(__dirname + '/public/css/MyCSS.css');
});

Then it seems to work.

然后它似乎工作。