当我在 nodejs 中转到 localhost/about/{randomtext} 时，CSS 文件未应用于 404 错误页面

Question

如标题所示，我的 css 文件不适用于 localhost/about/{anyrandomtext} 但它适用于 localhost/{anyrandomtext}

我试过这样做但是没有用:

app.get('/about/*', (req, res) => {
    res.render('404')
})
app.get('*', (req, res) => {
    res.render('404')
})

我在之后使用了 app.use('/public', express.static(staticFilePath))，它适用于所有页面。 CSS 应用于所有页面，但现在我遇到了 404 错误页面问题。这是我的文件结构

header.hbs

**<link rel="stylesheet" href="public/css/styles.css">**
<title>Weather</title>

404.hbs

<!DOCTYPE html>
<html lang="en">

<head>
    {{> header}}
</head>

<body>

    <div class="container error_page">
        <img src="../../public/images/404error.png" alt="">
        <h1>Page could not be Found</h1>
        <button type="button" class="btn">Go to Home</button>

    </div>

</body>

</html>

这是我的代码。请帮助

const express = require('express')
const hbs = require('hbs')
const path = require('path')
const port = process.env.PORT || 8000
const app = express()

const staticFilePath = path.join(__dirname, '../public')
const viewsFilePath = path.join(__dirname, '../templates/views')
const partialPath = path.join(__dirname, '../templates/partials')

hbs.registerPartials(path.join(partialPath))
app.set('view engine', 'hbs')
app.set('views', viewsFilePath)
app.use('/public', express.static(staticFilePath))

app.get('/', (req, res) => {
    res.render('index')
})
app.get('/about', (req, res) => {
    res.render('about')
})
app.get('/weather', (req, res) => {
    res.render('weather')
})

app.get('*', (req, res) => {
    res.render('404')
})

app.listen(port, () => {
    console.log(`Successfully connected at port ${port}`);
})

Answer 1

使用app.use(express.static(staticFilePath))代替app.use('public', express.static(staticFilePath))

当我在 nodejs 中转到 localhost/about/{randomtext} 时，CSS 文件未应用于 404 错误页面

CSS file is not applied to 404 error page when I go to localhost/about/{randomtext} in nodejs

css

node.js

express

handlebars.js