如何使用 node、express 和 ejs 包含 css 文件？

Posted 2023-03-03

【中文标题】如何使用 node、express 和 ejs 包含 css 文件？

【英文标题】：How can I include css files using node, express, and ejs?

【发布时间】：2014-08-26 06:25:32

【问题描述】：

我正在尝试按照https://***.com/a/18633827/2063561 的说明进行操作，但我仍然无法加载我的styles.css。

来自 app.js

app.use(express.static(path.join(__dirname, 'public')));

在我的 .ejs 中，这两行我都试过了

<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/public/css/style.css" />

都不加载 css。我进入开发人员控制台注意到类型设置为“text/html”而不是“text/css”。

我的路径看起来像

.
./app.js
./public
    /css
        /style.css

【问题讨论】：

<link> 元素不需要结束 /。

修复后仍然无法正常工作。不错的收获。

您在中间件/路由堆栈的最顶部有 express.static 中间件行（例如，在您创建应用程序之后）？

哇，原来如此。我将它移到 app.set('views', __dirname + '/views') 和 app.set('view engine', 'ejs') 上面并且它起作用了。谢谢！

在文档中：expressjs.com/starter/static-files.html

【参考方案1】：

注册路线的顺序很重要。在静态文件后注册404路由。

正确的顺序：

app.use("/admin", admin);
...

app.use(express.static(join(__dirname, "public")));

app.use((req, res) => 
  res.status(404);
  res.send("404");
);

否则所有不在路由中的东西，比如 css 文件等，都会变成 404。

【参考方案2】：

在您的应用或 server.js 文件中包含以下行：

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

在您的 index.ejs 中，以下行将帮助您：

<link rel="stylesheet" type="text/css" href="/css/style.css" />

我希望这对我有帮助！

【参考方案3】：

对于 NodeJS，我将从res.url 获取文件名，通过使用path.extname 获取文件的扩展名来写入文件的标题，为文件创建读取流，并通过管道传递响应。

const http = require('http');
const fs = require('fs');
const path = require('path');
const port = process.env.PORT || 3000;

const server = http.createServer((req, res) => 
    let filePath = path.join(
        __dirname,
        "public",
        req.url === "/" ? "index.html" : req.url
    );

    let extName = path.extname(filePath);
    let contentType = 'text/html';

    switch (extName) 
        case '.css':
            contentType = 'text/css';
            break;
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.json':
            contentType = 'application/json';
            break;
        case '.png':
            contentType = 'image/png';
            break;
        case '.jpg':
            contentType = 'image/jpg';
            break;
    

    console.log(`File path: $filePath`);
    console.log(`Content-Type: $contentType`)

    res.writeHead(200, 'Content-Type': contentType);

    const readStream = fs.createReadStream(filePath);
    readStream.pipe(res);
);

server.listen(port, (err) => 
    if (err) 
        console.log(`Error: $err`)
     else 
        console.log(`Server listening at port $port...`);
    
);

【讨论】：

非常好，谢谢，一直在寻找类似的东西。

【参考方案4】：

恕我直言，使用 ExpressJS 回答这个问题是给出一个肤浅的答案。在不使用任何框架或模块的情况下，我将尽我所能回答。之所以经常使用框架来回答这个问题，是因为它消除了理解“超文本传输​​协议”的要求。

首先应该指出的是，这更多是围绕“超文本传输​​协议”的问题，而不是 Javascript。发出请求时，将发送 url 以及预期的内容类型。 要了解的第二件事是请求的来源。最初，一个人会请求一个 HTML 文档，但根据文档中写入的内容，文档本身可能会向服务器发出请求，例如：图像、样式表等。这个问题是关于 CSS 的，所以我们将把注意力集中在那里。在将 CSS 文件链接到 HTML 文件的标签中，有 3 个属性。 rel="stylesheet" type="text/css" 和 href="http://localhost/..." 对于这个例子，我们将重点关注类型和 href。 Type 向服务器发送一个请求，让服务器知道它正在请求“text/css”，而“href”也告诉它在哪里发出请求。

因此，指出我们现在知道哪些信息正在发送到服务器，现在我们可以使用一点 javascript 在我们的服务器端将 css 请求与 html 请求分开。

var http = require('http');
var url = require('url');
var fs = require('fs');




    function onRequest(request, response)  
        if(request.headers.accept.split(',')[0] == 'text/css') 
             console.log('TRUE');

             fs.readFile('index.css', (err, data)=>
                 response.writeHeader(200, 'Content-Type': 'text/css');
                 response.write(data);
                 response.end();
             );  
        

        else 
            console.log('FALSE');    

            fs.readFile('index.html', function(err, data)
                response.writeHead(200, 'Content_type': 'text/html');
                response.write(data);
                response.end();
            );
        ;
    ;

    http.createServer(onRequest).listen(8888);
    console.log('[SERVER] - Started!');

这是我可能单独请求的一种方式的快速示例。现在请记住，这是一个简单的示例，通常会跨服务器文件进行拆分，其中一些文件具有对其他文件的依赖关系，但对于“简而言之”的解雇，这是我能做的最好的事情。我测试了它并且它有效。请记住，index.css 和 index.html 可以与您想要的任何 html/css 文件交换。

【讨论】：

我不明白您为什么要用纯节点/JavaScript 编写答案 - 问题专门关于 express 以及如何使用该库正确提供文件。你所说的关于HTTP的问题的基础也是错误的，它与分离文件无关。即使 OP 听从了您的建议，他们仍然不知道如何在 express 上提供文件，这是他们想要做的

@ScottAnderson 首先，这个问题是根据原始问题编辑的，但我同意这个问题在其当代状态下是针对 Express 的，作者从未明确说明过。在写这篇文章时，我希望能帮助理解引擎盖下的机制。我觉得这比仅仅给对 Node 很陌生的人提供几行代码更有帮助。如果您不喜欢它，请投反对票。如果问题达到 0，我将删除它。每一个 JS 框架，不管是什么味道，本质上都是香草味的。

该问题的顶部有一个代码行，它讨论了 app.set （可能最初不存在）。不要误会我的意思，我认为理解这对网络编程很有用，但鉴于 OP 写的内容，我只是不明白它与这个问题有什么关系。无论如何，在发表评论后，我看到有人回答非常相似：虽然我无法验证，但我可以说原始问题可能完全不同。但是，如果不是，那么恕我直言，这属于“有用的知识”，而不是“相关信息”，应该稍微正式化为博客或要点并仅在 cmets 中链接

【参考方案5】：

我们拥有的自定义样式表是本地文件系统中的静态页面。为了让服务器提供静态文件，我们必须使用，

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

在哪里，

public 是我们必须在根目录中创建的文件夹，它必须有其他文件夹，例如 css、images.. 等

目录结构如下：

然后在你的html文件中，引用style.css为

<link type="text/css" href="css/styles.css" rel="stylesheet">

【参考方案6】：

在您的主要.js 文件中使用：

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

在你的主.html文件中使用：

<link rel="stylesheet" type="text/css" href="css/style.css" />

出现错误的原因是您在 __dirname 之后使用逗号而不是 concat +。

【参考方案7】：

上面的反应一半有效，我不是为什么他们没有在我的机器上，但我必须执行以下操作。

在根目录下创建了一个目录

/public/js/

将其粘贴到您的 server.js 文件中，其名称与上面创建的目录名称相匹配。 注意添加/public 作为第一个参数

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

最后在要导入 javascript 文件的 HTML 页面中，

<script src="public/js/bundle.js"></script>

【参考方案8】：

1.如果不存在，则创建一个名为“public”的新文件夹。

2.在新建的'public'文件夹下新建一个名为'css'的文件夹

3.在 public/css 路径下创建你的 css 文件

4.在您的 html 链接 css 上，即 <link rel="stylesheet" type="text/css" href="/css/style.css">

//注意href之前使用了斜杠（/），你不需要包含'public'

5.在您的 app.js 中包括： app.use(express.static('public'));

Boom.It 有效！！

【讨论】：

接受的答案中采用的方法比这更可靠。见this question。我们知道公共目录和里面有脚本的目录之间的关系。我们不知道它与调用脚本的目录之间的关系。

【参考方案9】：

如果您使用express.static(__dirname + 'public')，这很简单，那么不要忘记在公共前面加上一个正斜杠express.static(__dirname + '/public') 或使用express.static('public') 它也可以工作； 并且不要更改 CSS 链接中的任何内容。

【参考方案10】：

我已使用以下步骤来解决此问题

创建新文件夹（静态）并将所有 js 和 css 文件移动到此文件夹中。 然后添加 app.use('/static', express.static('static')) 像一样添加css 重启服务器以查看更改后的影响。

【参考方案11】：

在你的 server.js 文件中使用它

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

没有目录（ __dirname ），然后在您的项目文件夹中创建一个新文件并将其命名为 public，然后将所有静态文件放入其中

【讨论】：

不完整的答案。

接受的答案中采用的方法比这更可靠。见this question。我们知道公共目录和里面有脚本的目录之间的关系。我们不知道它与调用脚本的目录之间的关系。

【参考方案12】：

在你的 server.js 文件中使用它

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

并添加类似的css

<link rel="stylesheet" type="text/css" href="css/style.css" />

在css之前不需要/

<link rel="stylesheet" type="text/css" href="/css/style.css" />

【讨论】：

这会破坏非根路径（例如，点击/article/edit 将导致浏览器寻找/article/css/style.css）。

我用了 let path = path.join(__dirname + '/public'); ...您使用 let path = require('"path");使用 path.join ...在 Windows 上将它们作为字符串加入不起作用

For more information 关于使用 Express 提供静态文件（如样式表）。

这里有一个错误，你应该在你的.css路径之前使用'/'，否则对于非根路径它将不起作用，因为路径不是绝对的：

我来这里是为了寻找如何正确链接我设置为背景的图像。以下相同的方法可以应用于“img”文件夹，如果它们都在公共文件夹中，则可以正常链接到该文件夹​​。感谢您的精彩回答！