静态 CSS 文件不适用于路由器 Express

Question

我正在使用 express 构建一个简单的登录应用程序。我使用 ejs 作为我的模板 engine.the 我的应用程序的文件结构是

package.json
server.js
routes
   index.js
   users.js
views
   layouts.ejs
   login.ejs
   register.ejs
   welcome.ejs
public
   css
      bitnami.css

bitnami.css 包含我从 bootswatch

下载的 css 代码

server.js 有以下代码

const express = require('express');
const app = express();
const PORT = process.env.PORT;
const expressLayouts = require('express-ejs-layouts');
const path = require('path');
global.appRoot = path.resolve(__dirname);
console.log(path.join(global.appRoot,"public"));

//EJS
app.use(expressLayouts);
app.set('view engine','ejs');
//set static path
app.use(express.static(path.join(global.appRoot,"public")));
//Routes
app.use('/',require('./routes/index'));
app.use('/users',require('./routes/users'));

app.listen(PORT,()=>{
    console.log(`server running at ${PORT}`);
})

index.js 有

const express = require('express');
router = express.Router();

router.get('/',(req,res)=>{
    res.render('welcome',{layout : 'layouts'});
})

users.js 有

const express = require('express');
router = express.Router();
router.get('/login',(req,res)=>{
    res.render('login',{layout : 'layouts'});
})
router.get('/register',(req,res)=>{
    res.render('register',{layout : 'layouts'});
})

module.exports = router;

    module.exports = router;

layouts.ejs 有以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BNI EVENT</title>
    <link rel="stylesheet" href="css/bitnami.css">
    <script src="https://kit.fontawesome.com/9c59f82571.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <%- body %>

    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

如果我从 CDN 加载 css 文件，或者如果我为每个在 '/' ex('/users') 之后有内容的路由器使用静态中间件，css 文件就可以工作但我想知道这个问题是否有更简单的解决方案

如果 users.js 具有以下代码，则 CSS 文件可以正常工作

const express = require('express');
router = express.Router();
const path = require('path');
// setting the static middleware for this route 
router.use(express.static(path.join(global.appRoot,"public")));
router.get('/login',(req,res)=>{
    res.render('login',{layout : 'layouts'});
})
router.get('/register',(req,res)=>{
    res.render('register',{layout : 'layouts'});
})

module.exports = router;

Answer 1

这是一个非常基本的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BNI EVENT</title>
    <link rel="stylesheet" href="css/bitnami.css">
    <script src="https://kit.fontawesome.com/9c59f82571.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <%- body %>

    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

我在布局文件中使用了 css/bitnami.css 所以每当我去某个路线时让我们说 url.com/add 然后浏览器正在搜索文件添加/css/bitnami.css。为了实现浏览器总是在主目录中查找 css 文件夹，我不得不使用 /css/bitnami.css

正确的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BNI EVENT</title>
    <!-- change is here -->
    <link rel="stylesheet" href="/css/bitnami.css">
    <script src="https://kit.fontawesome.com/9c59f82571.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <%- body %>

    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

静态 CSS 文件不适用于路由器 Express

Static CSS file not working with router Express

css

node.js

express

ejs

express-router