Node.js与Express中相对路径及静态资源配置问题

Got it, let's sort this out step by step. The core issue here is your static file middleware is pointing to the wrong folder, and your HTML's resource path doesn't align with the route you've configured. Here's exactly what to do:

1. Fix the Static Middleware in index.js #

Right now, your static middleware is trying to serve a static folder that doesn't exist (your shared resources are in the shared folder instead). Plus, the way you're joining paths has a syntax issue—path.join uses comma-separated arguments, not string concatenation with +.

Replace this line:

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

With this corrected version:

app.use('/static', express.static(path.join(__dirname, 'shared')));

This tells Express to serve all files inside the shared folder whenever a request starts with /static. For example, shared/css/style.css will now be accessible at /static/css/style.css.

2. Update the CSS Path in login.html #

Since we've mapped the shared folder to the /static route, you need to update your HTML's link tag to use this absolute path. Relative paths can cause issues here (especially if your route is /login), so using an absolute path starting with / is more reliable.

Change this line in the <head> of login.html:

<link rel="stylesheet" href="shared/css/style.css">

To:

<link rel="stylesheet" href="/static/css/style.css">

3. Test the Setup #

Restart your Express server, then visit http://localhost:3000/login. Your CSS should now load correctly!

If you have images in shared/images/, you'd reference them the same way—for example:

<img src="/static/images/your-image.png" alt="Description">

Full Modified Code Examples #

Updated index.js #

const express = require('express');
var path = require('path');
const cors = require('cors');
const port = process.env.PORT || 3000;
const app = express();

app.use(cors());
// Corrected static middleware
app.use('/static', express.static(path.join(__dirname, 'shared')));

app.get('/', async (req, res) => { res.send('hello world!'); })
app.get('/login', (req, res) => { res.sendFile(path.join(__dirname, '/login/login.html')); })

app.listen(port, () => { console.log('listening on http://localhost:' + port); })

Updated login.html #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Form</title>
<!-- Updated CSS path -->
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div class="login-form">
<h1>Login Form</h1>
<form action="auth" method="POST">
<input autocomplete="off" type="text" name="username" placeholder="Username" required>
<input autocomplete="off" type="password" name="password" placeholder="Password" required>
<input type="submit">
</form>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者lechnerio