Express.js如何根据地址栏路径分发静态文件加载

问题分析 #

你当前的代码存在两个核心问题：

• 连续调用express.static会让Express按顺序查找文件，先查src目录，找不到再查admin，无法实现路径前缀隔离的需求。
• 自定义中间件里仅创建了静态文件处理函数，但未实际执行它处理请求，导致静态文件无法加载。

最优解决方案：利用Express路由前缀匹配 #

Express的app.use支持指定路径前缀，直接通过前缀绑定对应静态目录是最简洁的实现方式，无需自定义中间件：

import express from "express";
import path from "path";
import fs from "fs";

const __dirname = path.resolve();
const app = express();

app.use(express.json());

// 所有以/admin开头的请求，从admin目录加载静态文件
app.use('/admin', express.static(path.join(__dirname, 'admin'), { index: 'none' }));

// 其他所有请求，从src目录加载静态文件
app.use(express.static(path.join(__dirname, 'src'), { index: 'none' }));

// 处理SPA入口页面，注意要放在静态文件中间件之后
app.get(['/', '/admin', '/admin/*', '/*'], (req, res) => {
    let mainHtmlPath;
    // 判断请求是否属于admin路径
    if (req.path.startsWith('/admin')) {
        mainHtmlPath = path.join(__dirname, 'admin', 'index.html');
    } else {
        mainHtmlPath = path.join(__dirname, 'src', 'index.html');
    }

    fs.readFile(mainHtmlPath, 'utf8', (err, html) => {
        if (err) {
            console.error(err, 'Ошибка');
            return res.status(500).send('加载页面失败');
        }
        res.send(html);
    });
});

app.listen(80, () => console.log(`Server is run on port 80`))

关键说明： #

• app.use('/admin', express.static(...))：仅当请求路径以/admin开头时，才会去admin目录查找静态文件，比如请求/admin/css/style.css会对应到admin/css/style.css。
• 静态文件中间件要放在路由处理之前，否则会被app.get('/*')拦截。
• 调整入口页面的路由匹配，用数组覆盖所有需要返回HTML的路径，同时通过req.path.startsWith('/admin')更准确判断admin路径。

修复自定义中间件的写法（可选） #

如果一定要用自定义中间件实现，需要调用静态文件处理函数并传递req、res、next参数，而非仅创建函数：

import express from "express";
import path from "path";
import fs from "fs";

const __dirname = path.resolve();
const app = express();

app.use(express.json());

// 修复后的自定义静态文件中间件
app.use((req, res, next) => {
    let staticMiddleware;
    if (req.path.startsWith('/admin')) {
        staticMiddleware = express.static(path.join(__dirname, 'admin'), { index: 'none' });
    } else {
        staticMiddleware = express.static(path.join(__dirname, 'src'), { index: 'none' });
    }
    // 调用静态中间件处理当前请求
    staticMiddleware(req, res, next);
});

// SPA入口页面路由
app.get(['/', '/admin', '/admin/*', '/*'], (req, res) => {
    let mainHtmlPath;
    if (req.path.startsWith('/admin')) {
        mainHtmlPath = path.join(__dirname, 'admin', 'index.html');
    } else {
        mainHtmlPath = path.join(__dirname, 'src', 'index.html');
    }

    fs.readFile(mainHtmlPath, 'utf8', (err, html) => {
        if (err) {
            console.error(err, 'Ошибка');
            return res.status(500).send('加载页面失败');
        }
        res.send(html);
    });
});

app.listen(80, () => console.log(`Server is run on port 80`))

关键修复点： #

• 创建staticMiddleware后，必须调用它并传入req、res、next，才能让它处理请求并返回静态文件。
• 用req.path.startsWith('/admin')替代req.url[0] === '/admin/'，前者能正确匹配所有以/admin开头的路径（如/admin/users、/admin/）。

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