Express项目如何通过Router托管node_modules静态资源保持主文件整洁

Express Router 完全支持托管静态资源，无法生效是代码写法错误导致，核心问题如下：

错误原因 #

你直接将静态资源的文件路径传给了router.use()，但Express托管静态资源必须显式调用express.static()中间件处理文件路径，直接传入字符串路径不会被识别为静态资源托管规则，请求匹配不到处理逻辑就会返回404。
此外需要注意：路由文件中__dirname指向的是路由文件所在的./routes目录，如果你的node_modules存放在项目根目录，路径需要回退一级，比如path.resolve(__dirname, '../node_modules/xxx/dist')，你已确认路径无问题可忽略该点。

修正方案 #

修改./routes/route1.js代码，给所有静态资源路径套上express.static：

const express = require('express');
const router = express.Router();
const path = require('path');

// 静态资源托管必须用express.static包裹路径
router.use('/bootstrap', express.static(path.resolve(__dirname, '../node_modules/bootstrap/dist')));
router.use('/axios', express.static(path.resolve(__dirname, '../node_modules/axios/dist')));
router.use('/aos', express.static(path.resolve(__dirname, '../node_modules/aos/dist')));

module.exports = router

主服务文件的引入逻辑无需修改，重启服务即可正常访问静态资源。

优化建议 #

如果托管的依赖数量较多，可以用配置数组循环注册规则，避免重复代码：

const express = require('express');
const router = express.Router();
const path = require('path');

// 统一维护要托管的第三方库配置
const libConfig = [
  { name: 'bootstrap', dir: '../node_modules/bootstrap/dist' },
  { name: 'axios', dir: '../node_modules/axios/dist' },
  { name: 'aos', dir: '../node_modules/aos/dist' },
  // 新增依赖仅需在这里加配置项即可
];

// 循环注册托管规则
libConfig.forEach(lib => {
  router.use(`/${lib.name}`, express.static(path.resolve(__dirname, lib.dir)));
});

module.exports = router

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