包括 css 和 node.js + express + ejs 上的 js 文件

Question

我正在尝试在使用 express 和 ejs 的 node.js 项目中使用样式表和 javascript 文件。

我的结构：

public/
  -- css/
  -- js/
  -- images/

和我的 chat.ejs 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../partials/head %>
</head>
<body>

.. content ..

    <% include ../partials/footer %>

</body>
</html>

在我的 partials/head.ejs 中有代码

<link href="public/css/custom.css" rel="stylesheet">

它应该加载样式文件，但它没有。顺便说一句，我的主要 chat.js:

    var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));

// index page
app.get('/', function(req, res) {
    res.render('pages/chat');
});

app.listen(3000, function(){
    console.log('listening on *:3000');
});

那么如何正确使用呢？

Answer 1

public 文件夹实际上不会成为客户端可用的 URL 路径的一部分：

<link href="/css/custom.css" rel="stylesheet">

您给 express.static() 的路径将与 URL 路径合并，效果为：

// GET /css/custom.css
(__dirname + '/public') + '/css/custom.css'

因此，当请求 public/css/custom.css 时，express.static() 将尝试查找：

// GET /public/css/custom.css
(__dirname + '/public') + '/public/css/custom.css'

期望文件夹结构为：

public/
  -- public/
      -- css/
      -- js/
      -- images/

包括 css 和 node.js + express + ejs 上的 js 文件

Including css and js files on node.js + express + ejs

javascript

css

ejs

node.js

express