【问题标题】:Cannot get app.css, main.js, other files to load using an Express server无法使用 Express 服务器加载 app.css、main.js 和其他文件
【发布时间】:2015-02-25 23:03:34
【问题描述】:

我有以下代码:

var express = require('express');
var app = express();
var server = require('http').Server(app);

app.get('/', function(req,res){
 res.sendfile(__dirname + '/index.html');
});

server.listen(3000);

但是,只有我的 index.html 页面显示,并且我的其他文件出现 GET 错误。当我在 localhost:3000 加载 index.html 时,控制台中出现错误,试图找到我的 main.js 和 app.css 文件。即使我将其他文件作为 src 包含在 html 文件中,它们也无法加载。我认为这可能是因为我只将单个 html 文件发送到服务器。我该如何处理,以便将所有相关文件发送到服务器?

【问题讨论】:

    标签: javascript express server


    【解决方案1】:

    您尚未提供链接文件的路径。

    使用静态中间件:http://expressjs.com/api.html#express.static

    来自文档:

    以下是在 Express 应用中使用 express.static 中间件的一些示例。

    从应用目录中的“公共”目录为应用提供静态内容。

    // GET /style.css etc
    app.use(express.static(__dirname + '/public'));
    

    将中间件挂载到“/static”以仅在其请求路径以“/static”为前缀时提供静态内容。

    // GET /static/style.css etc.
    app.use('/static', express.static(__dirname + '/public'));
    

    通过在静态中间件之后加载记录器中间件来禁用静态内容请求的日志记录。

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

    提供来自多个目录的静态文件,但“./public”优先于其他目录。

    app.use(express.static(__dirname + '/public'));
    app.use(express.static(__dirname + '/files'));
    app.use(express.static(__dirname + '/uploads'));
    

    【讨论】:

      【解决方案2】:

      使用

      res.sendfile(__dirname + '/index.html');
      

      响应 get 请求不会提供您所有的静态文件,只有单个 index.html 文件 — 意味着您的服务器不会找到您的 css 和 javascript 文件(即使您在 html 中链接到它们) )。

      您需要使用包含的 express 静态中间件(express v4 中唯一包含的中间件)。

      如果您的静态文件与 server.js 文件位于同一目录中,则添加

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

      这会提供您所有的本地静态文件,并使它们在您的服务器上可访问。

      不久前我写了一篇关于此的博客文章:

      https://medium.com/@willsentance/how-to-avoid-main-js-style-css-not-found-or-how-i-learned-to-love-serving-static-files-with-node-2121255da0fd

      【讨论】:

      • 谢谢威尔!这很有意义。我要去看看那篇博文。
      猜你喜欢
      • 2020-04-08
      • 1970-01-01
      • 2019-04-01
      • 2020-11-24
      • 1970-01-01
      • 1970-01-01
      • 2013-12-14
      相关资源
      最近更新 更多