Express.js静态文件在多级路由下无法正常加载的问题求助

我开发了一个Express应用，静态文件仅在部分路由下正常工作：

• 访问根路径/时，渲染index.ejs页面的静态样式与图片均正常；
• 访问不存在的单级路由如/efbhew时，404.ejs页面可正常渲染；
• 但访问/asdw/feff或/df/fg/dfgdfg/sfgd这类多级路由时，静态样式与图片无法加载，此时图片请求路径变为http://localhost:3000/asdf/wfds/img/logo.png。尝试调整public文件夹路径但未解决问题。

原代码 #

const app = express();
app.use(express.static(path.join(__dirname, '../public')));
app.set('views', path.join(__dirname, '../views'));
app.set('view engine', 'ejs');
app.use(cors());
app.use(express.json());

app.get('/', async (req, res) => {
    const posts = await Post.find({}).limit(7).sort({ createdAt: -1 }).exec();

    res.render('index.ejs', {
        latestPosts: posts
    });
});


app.get('*', (req, res) => {
    res.render('404.ejs');
});

文件夹结构 #

问题核心是静态资源的相对路径引用会随当前路由层级变化，导致多级路由下资源路径解析错误。以下是两种可行解决方式：

方式一：给静态文件添加固定前缀 #

1. 修改Express静态中间件配置，指定挂载路径前缀：

// 替换原静态文件中间件代码
app.use('/static', express.static(path.join(__dirname, '../public')));

2. 更新EJS模板中的资源引用，改为以/static开头的绝对路径：

• 图片引用：<img src="/static/img/logo.png">
• 样式引用：<link rel="stylesheet" href="/static/css/style.css">

方式二：直接使用根路径开头的绝对引用 #

无需修改静态中间件配置，只需将模板中所有资源引用改为以/开头的绝对路径：

• 图片引用：<img src="/img/logo.png">
• 样式引用：<link rel="stylesheet" href="/css/style.css">

原理说明：当访问多级路由时，浏览器会将当前路由路径作为相对路径基准，导致img/logo.png被解析为/asdw/feff/img/logo.png。使用绝对路径或固定前缀后，资源请求会直接指向根目录下的public文件夹，不受当前路由影响。

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