Express应用中CSS无法加载，Live Server却正常的原因？

当你通过Express运行app.js时，页面无法加载CSS样式，但用Live Server打开HTML却正常，核心原因是Express默认不会自动处理静态资源（如CSS、JS、图片等）的请求，而Live Server会自动完成静态资源的服务映射。

浏览器加载HTML后，会发起styles.css的请求，此时Express没有配置对应的路由或静态服务规则，会返回404错误，导致样式无法加载；而Live Server会自动识别并返回同目录下的静态文件，所以样式生效。

解决步骤 #

你需要在Express中添加静态文件服务配置，告诉服务器从哪个目录读取静态资源：

1. 修改app.js，添加静态服务配置 #

假设你的styles.css和index.html在同一目录下，添加以下代码：

// 配置静态文件服务，指定当前目录为静态资源根目录
app.use(express.static(path.join(__dirname, '.')));

完整的app.js代码如下：

const express = require('express');
const path = require('path');
const app = express();

// 新增：配置静态文件服务
app.use(express.static(path.join(__dirname, '.')));

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '/index.html'));    
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`Serving on port ${port}`)
})

2. 优化建议（可选） #

如果你的项目有专门的静态资源目录（比如public文件夹），可以将静态资源放入该目录，然后修改配置路径：

// 指定public目录为静态资源根目录
app.use(express.static(path.join(__dirname, 'public')));

此时需要确保styles.css放在public目录下，HTML中的引用路径保持href="styles.css"即可。

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