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。我做错了什么？

Answer 1

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

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

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

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

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

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

Answer 3

这对我有用：

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

Answer 4

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

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

Answer 5

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

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

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

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

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

Answer 6

在你的 server.js 中：

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

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

Answer 7

对我有用的是：

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

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

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

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

希望这会有所帮助:)

Answer 8

提供静态文件（css、图像、js文件）只需两步：

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 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">    

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

Answer 10

Webpack 让事情变得尴尬

作为对所有其他现有解决方案的补充：

首先要做的事情：如果您的文件和目录的路径基于cwd（当前工作目录），那么一切应该照常进行，因为cwd 是您启动@987654326 时所在的文件夹@（或npm start、yarn run 等）。

不过……

如果您使用的是 webpack，__dirname 的行为会非常不同，具体取决于您的 node.__dirname 设置和您的 webpack 版本：

1. 在 Webpack v4 中，__dirname 的默认行为只是/，如documented here。
   • 在这种情况下，您通常希望将其添加到您的配置中，使其像 v5 中的默认设置一样，即 __filename 和 __dirname 现在按原样运行 但输出文件：

     module.exports = {
        // ...
        node: {
          // generate actual output file information
          // see: https://webpack.js.org/configuration/node/#node__filename
          __dirname: false,
          __filename: false,
        }
     };
     

   • here 也讨论过这个问题。
2. 在 Webpack v5 中，per the documentation here，默认情况下 __filename 和 __dirname 的行为与输出文件一样但，从而达到与配置更改相同的结果对于 v4。

示例

例如，假设：

• 您要添加静态public 文件夹
• 它位于您的输出（通常是dist）文件夹旁边，而您在dist 中没有子文件夹，它可能看起来像这样

const ServerRoot = path.resolve(__dirname /** dist */, '..');
// ...
app.use(express.static(path.join(ServerRoot, 'public'))

（重要：再次强调，这与源文件的位置无关，只查看输出文件的位置！）

更高级的 Webpack 场景

如果您在不同的输出目录中有多个入口点，事情会变得更加复杂，因为 same 文件的__dirname 对于输出文件（即entry 中的每个文件）可能不同，取决于这个源文件被合并到的输出文件的位置，更糟糕的是，同一个源文件可能会被合并到多个不同的输出文件中。

您可能希望避免这种情况，或者，如果您无法避免，请使用 Webpack 为您管理和注入正确的路径，可能通过DefinePlugin 或EnvironmentPlugin。

Answer 11

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

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

您实际上是在给它命名文件夹，即样式而不是您的子网址。

Answer 12

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

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

然后它似乎工作了。

Answer 13

服务__dirname的问题是__dirname返回的是当前文件的路径，而不是项目的文件。 此外，如果您使用动态页眉，每个页面都会在不同的路径中查找静态文件，这将无法正常工作。 对我来说，最好的方法是将__dirname 替换为process.cwd()，它总是提供项目文件的路径。

app.use(express.static(process.cwd() + '/public'));

在你的项目中：

link rel="stylesheet" href="/styles/default.css"

见：What's the difference between process.cwd() vs __dirname?

Answer 14

除上述之外，请确保静态文件路径以 / 开头（例如... /assets/css）... 以在主目录（/main）上方的任何目录中提供静态文件

Answer 15

如果你的设置

myApp
  |
  |__ public
  |     |
  |     |__  stylesheets
  |     |     |
  |     |     |__ style.css
  |     |
  |     |___ img
  |           |
  |           |__ logo.png
  |
  |__ app.js

那么，
放入 app.js

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

并参考您的 style.css：（在某些 .pug 文件中）：

link(rel='stylesheet', href='/static/stylesheets/style.css')

Answer 16

1. 在 Nodejs 项目中创建一个名为“public”的文件夹
   文件夹。
2. 将 index.html 文件放入 Nodejs 项目文件夹中。
3. 公开所有脚本和css文件 文件夹。

4. 使用app.use( express.static('public'));

5. 在index.html 中将脚本的正确路径指向<script type="text/javascript" src="/javasrc/example.js"></script>

现在一切正常。

Answer 17

static directory

查看上图（静态目录）的目录结构

const publicDirectoryPath = path.join(__dirname,'../public')
app.use(express.static(publicDirectoryPath))


//  or

app.use("/", express.static(publicDirectoryPath))
app.use((req, res, next) => {
res.sendFile(path.join(publicDirectoryPath,'index.html'))

Answer 18

尝试'./public' 而不是__dirname + '/public'。 同样，试试process.cwd() + '/public'。

有时我们会忘记我们正在使用的目录，最好避免假设文件位于我们告诉 express 的位置。

同样，避免假设在依赖的深度中，路径在每个级别都以相同的方式被解释。

Answer 19

我只是试试这段代码并开始工作

const exp = require('express');
const app = exp();

app.use(exp.static("public"));

工作，

之前（不工作）：

const express = require('express');
const app = express();
app.use(express.static("public"));

试试吧