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

Posted

技术标签:

【中文标题】Express-js 无法获取我的静态文件，为啥？【英文标题】：Express-js can't GET my static files, why?Express-js 无法获取我的静态文件，为什么？ 【发布时间】：2011-08-20 21:52:55 【问题描述】：

我已将我的代码简化为我可以制作的最简单的 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。我做错了什么？

【问题讨论】：

查看下方链接only4ututorials.blogspot.com/2017/05/… 【参考方案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'));

【讨论】：

在新安装的情况下，您应该验证您的 express 模块是否已正确安装 (expressjs.com/en/starter/installing.html) 然后您应该检查路径和您的目录名称，如 Giacomo 所说;) 始终使用path.join 来克服跨平台目录分隔符问题。 path.join(__dirname, '/') 我把它放在我的代码中，但浏览器总是重定向到“/static/myjs.js/”，最后 / 给我一个 MIME 类型的错误 挂载路径在Express 和prod 中是否有意义，或者它是开发人员的测试问题？也许有一个 url 文件夹看起来更有序。 如果有人使用 TypeScript（或不使用）偶然发现此评论并遇到同样的问题：如果您的文件位于 src/ 目录中，请使用 path.join(__dirname, "../public")。【参考方案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

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

【讨论】：

感谢您分享您的解决方案，无论它是否最佳。如果您想重新打开问题进行优化，请考虑发布一个新问题，详细说明新情况。如果优化是唯一目的，这个问题可能更适合SO Code Review。 就我而言，使用 expressjs 进行静态导入的唯一方法是使用“path”模块。所有其他没有path.join 或前缀__dirname 字符串的解决方案都没有结果。【参考方案3】：

这对我有用：

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

【讨论】：

【参考方案4】：

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

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

【讨论】：

完全！按照 express.js 中的约定，您可以在 /public 上执行此操作，该文件夹具有 css、js、img 文件夹，因此您可以在 http://localhost:3001/css/default.css :)【参考方案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">

【讨论】：

这是对我有用的很好解释的答案。 +1 用于详细说明并给出一个有效的例子。上次这对我以前的项目有用，这只是侥幸，但今天当我在另一个新项目上工作时，我从你的回答中的良好解释中了解到它是如何工作的。【参考方案6】：

在你的 server.js 中：

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

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

【讨论】：

【参考方案7】：

对我有用的是：

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

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

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

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

希望这会有所帮助:)

【讨论】：

这解决了我的问题。在我的代码中，即使使用 __dirname 连接（使用 path.join），CSS 的路径也可以正常工作，而获取 js 失败。【参考方案8】：

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

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

    要访问 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">

【讨论】：

【参考方案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')));

【讨论】：

【参考方案10】：

Webpack 让事情变得尴尬

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

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

不过……

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

    在 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 也讨论过这个问题。 在 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。

【讨论】：

【参考方案11】：

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

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

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

【讨论】：

【参考方案12】：

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

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

然后它似乎工作了。

【讨论】：

我不推荐这种方法，因为您应该使用 ExpressJS 的 .use() 和 express.static() 方法将您的文件发送到哪里。否则，您的公共目录中的每个文件都会有一个这样的路由器，这需要大量维护。 这是一种解决方法，但我认为它不合适。如果你有很多 CSS 和 JS 文件，如何维护？【参考方案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?

【讨论】：

【参考方案14】：

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

【讨论】：

除了以上内容吗？在您的答案中说明（如果必须，请向发布它的人表示感谢）。所以经常改变答案的顺序，以便看到所有答案，而不是前几个。我们不知道你在说什么。【参考方案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')

【讨论】：

为什么要引入重命名步骤 public -> static？我会说这只是更令人困惑的额外信息。但话说回来，间接通常是一件好事......【参考方案16】：
    在 Nodejs 项目中创建一个名为“public”的文件夹 文件夹。 将 index.html 文件放入 Nodejs 项目文件夹中。 公开所有脚本和css文件 文件夹。

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

    在index.html 中将脚本的正确路径指向&lt;script type="text/javascript" src="/javasrc/example.js"&gt;&lt;/script&gt;

现在一切正常。

【讨论】：

【参考方案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'))

【讨论】：

【参考方案18】：

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

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

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

【讨论】：

【参考方案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"));

试试吧

【讨论】：

这完全没有变化，哈哈

以上是关于Express-js 无法获取我的静态文件，为啥？的主要内容，如果未能解决你的问题，请参考以下文章

为啥我的静态文件在部署到 Heroku 服务器时没有提供？ （姜戈）

为啥make无法获取环境变量

为啥我无法通过表达式语言找到静态方法

为啥我的节点静态文件服务器丢弃请求？

Django 为啥我的静态 JS 文件没有加载

为啥我需要使用 http.StripPrefix 来访问我的静态文件？