首页 文章

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

提问于
浏览 次
270

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

node.js express

14 回答

  • 1

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

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

    回复于
  • 2

    在你的server.js中：

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

    您已单独声明express和app，创建名为'public'的文件夹或您喜欢的文件夹，但您可以访问这些文件夹 . 在模板src中，您已将/ public（或命令文件夹的名称）的相对路径放入静态文件中 . 小心路线上的酒吧 .

    回复于
  • 23

    这项工作对我来说：

    app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));
    回复于
  • 0

    试试 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'));
    回复于
  • 0

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

    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

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

    回复于
  • 2

    提供静态文件（css，images，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'));

    note: 将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 ex：http://localhost:8081/css/bootstrap.css

    note 用html链接css文件只需添加以下行

    <link href="css/file_name.css" rel="stylesheet">
    回复于
  • 5

    我在我的应用程序中使用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">
    回复于
  • 436

    这个对我有用

    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')));
    回复于
  • 12

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

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

    你实际上是给它文件夹的名称，即样式而不是你的郊区 .

    回复于
  • 7

    对我有用的是：

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

    只需写 app.use(express.static('public/images'));

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

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

    希望这可以帮助 ：）

    回复于
  • 1

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

    回复于
  • 0

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

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

    然后它似乎工作 .

    回复于
  • 3

    如果您的设置

    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')
    回复于
  • 0

    Serving static files in Express

    要提供静态文件（如图像，CSS文件和JavaScript文件），请使用Express中的 express.static 内置中间件功能 .

    功能签名是：

    express.static(root, [options])

    root参数指定从中提供静态资产的根目录 .

    For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:

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

    现在，您可以加载公共目录中的文件：

    http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

    Express会查找相对于静态目录的文件，因此静态目录的名称不是URL的一部分 .

    要使用多个静态资产目录，请多次调用 express.static 中间件函数：

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

    Express按照使用 express.static 中间件功能设置静态目录的顺序查找文件 .

    注意：为获得最佳结果，请使用反向代理缓存来提高服务静态资产的性能 .

    To create a virtual path prefix （文件系统中实际不存在路径）对于 express.static 函数提供的文件，请指定静态目录的安装路径，如下所示：

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

    现在，您可以从/ static路径前缀加载公共目录中的文件 .

    http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

    但是，您提供给 express.static 函数的路径是相对于启动节点进程的目录 .

    如果从另一个目录运行express应用程序，则使用要提供的目录的绝对路径更安全：

    app.use('/static', express.static(path.join(__dirname, 'public')))
    回复于

相关问题