我正在使用express构建一个简单的登录应用程序。我使用 ejs 作为我的模板引擎。我的应用程序的文件结构是
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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9998699998c9bc7839aa9d8c7d8dfc7d9" rel="noreferrer noopener nofollow">[email protected]</a>/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 文件可以工作，但我想知道是否有 less此问题的冗余解决方案
如果 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;
最佳答案
这是一个非常基本的问题
<!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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0a150a0a1f085410093a4b544b4c544a" rel="noreferrer noopener nofollow">[email protected]</a>/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，浏览器就会在 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="79091609091c0b57130a394857484f5749" rel="noreferrer noopener nofollow">[email protected]</a>/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 - 静态 CSS 文件不适用于 Router Express，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62020484/