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。

要在您的请求网址中添加/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

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

提供

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

Answer 4

This work for me:

#import "OpenCVWrapper.h"

// import necessary headers
#import <opencv2/core.hpp>
#import <opencv2/imgcodecs/ios.h>
#import <opencv2/imgproc/imgproc.hpp>

using namespace cv;

@implementation OpenCVWrapper

+ (UIImage *) rgbImageFromBGRImage: (UIImage *) image {
    // Convert UIImage to cv::Mat
    Mat inputImage; UIImageToMat(image, inputImage);
    // If input image has only one channel, then return image.
    if (inputImage.channels() == 1) return image;
    // Convert the default OpenCV's BGR format to RGB.
    Mat outputImage; cvtColor(inputImage, outputImage, CV_BGR2RGB);
    // Convert the BGR OpenCV Mat to UIImage and return it.
    return MatToUIImage(outputImage);
}

@end

Answer 5

在您的server.js中：

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

您已单独声明express和app，创建一个名为＆＃39; public＆＃39;或者你喜欢，但你可以访问这些文件夹。在模板src中，您已添加/ public的相对路径（或命令文件夹的名称到静态文件）。小心路线上的酒吧。

Answer 6

提供静态文件（css，images，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文件或图片只需输入网址http://localhost:port/filename.css例如：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 7

我在我的应用程序中使用Bootstrap CSS，JS和Fonts。我在应用程序的根目录中创建了一个名为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 8

对我有用的是：

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

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

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

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

希望这会有所帮助：）

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

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

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

您实际上是在给它文件夹的名称，即样式不是您的郊区。

Answer 11

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

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

然后它似乎有效。

Answer 12

Webpack使事情变得尴尬

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

第一件事：如果文件和目录的路径基于cwd（当前工作目录），则事情应该照常进行，因为cwd是您所在的文件夹您开始node（或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场景

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

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

Answer 13

除了上述内容，请确保静态文件路径以/（ex ... / assets / css）...开头，以便在主目录（/ main）上方的任何目录中提供静态文件

Answer 14

如果你的设置

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 15

1. 在Nodejs项目中使用“公用”名称创建一个文件夹
   文件夹。
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 16

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 17

服务__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 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"));

只要尝试