Express 静态文件

Question

我正在尝试 link jade 模板中的样式表，并收到 404。我有样式表的确切路径，并将我的应用程序配置为从我的 'static' 目录，但我仍然收到 404？还有为什么需要提供静态文件？为什么不能将它们 link 编辑到您的模板中？

'use strict';

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

app.set('view engine', 'jade')
app.set('views', __dirname + '/templates')

app.listen('3000', function(){
    console.log('Running on port 3000');
})

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

// Routes

app.get('/', function(request, response){
    response.render('index')    
});

app.get('/blog:id', function(request, response){
    response.send('This is the blog page.')
})

app.get('/about', function(request, response){
    response.send('This is the about page.')
})

玉模板

html
    head
        link(rel="stylesheet", href="../../static/css/normalize.css")
        link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7", crossorigin="anonymous")
        link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css", integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r", crossorigin="anonymous")
    body
        div.hero(style="width: 100%; height: 400px; background-color: blue")
            h1(style="color: white;") This is the landing page !
        script(src="https://code.jquery.com/jquery-2.2.3.min.js",   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=",   crossorigin="anonymous")
        script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js", integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS", crossorigin="anonymous")

Answer 1

您可以让 css 文件 url 相对于静态文件夹

link(rel="stylesheet", href="/css/normalize.css")

Express 静态文件

Static files with Express

css

static

stylesheet

express

pug