在 node.js + express + ejs 上包含 css 和 js 文件答案

【问题标题】：Including css and js files on node.js + express + ejs在 node.js + express + ejs 上包含 css 和 js 文件
【发布时间】：2015-07-12 23:46:07
【问题描述】：

我正在尝试在使用 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');
});

那么如何正确使用呢？

【问题讨论】：

标签： javascript css node.js express ejs

【解决方案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/

【讨论】：