Express 模板未链接到脚本、CSS 或图像

Question

使用 Express，我运行 index.html 文件，但无法正确链接 css、js 或图像。没有图片显示，css和js没有链接。

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

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>

img/logo.png

我的目录结构如下：

root
    app.js
    package.json
    node_modules
    assets
        img
        css
        js
        templates
            theme1
                css
                fonts
                img
                js
                index.html
                about.html
                services.html
                news.html
                contact.html

在 app.js 中：

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

app.get('/', function(req, res) {
    //res.sendFile(path.join(__dirname + '/assets/templates/theme1/index.html'));
});

app.get('/about/', function(req, res) {
    res.sendFile(path.join(__dirname + '/assets/templates/theme1/about.html'));
});

app.get('/services/', function(req, res) {
    res.sendFile(path.join(__dirname + '/assets/templates/theme1/services.html'));
});

app.get('/services/', function(req, res) {
    res.sendFile(path.join(__dirname + '/assets/templates/theme1/news.html'));
});

app.get('/contact/', function(req, res) {
    res.sendFile(path.join(__dirname + '/assets/templates/theme1/contact.html'));
});

app.listen(3000);

需要更好地理解app.get 和app.use 以及res.sendFile

谢谢大家

Answer 1

所以，它不起作用，因为您没有告诉 Express 提供您想要的文件（js 和 css 等）。

首先您要使用static middleware 设置静态路由：

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

此时，“assets”目录中的所有内容都将相对于您的根 URL 提供。所以/img/someimage.jpg 是它的正确 URL。