如何用Express.js一次性将目录及所有子目录设为静态资源？

你遇到的核心问题并非express.static未生效，而是HTML里的资源引用路径和静态根目录不匹配。当你把views设为静态根时，所有子目录的资源本就可被访问，只是需要用正确的路径引用。

为什么单独设置views/homepage会生效？ #

假设你在homepage/index.html里引用CSS的代码是：

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

• 仅设置app.use(express.static('views'))时，浏览器会从当前页面的URL路径请求资源。如果页面路由是/（比如根路由渲染homepage），浏览器会请求/style.css，而该路径对应views/style.css（不存在），因此CSS失效。
• 添加app.use(express.static('./views/homepage'))后，/style.css会匹配到views/homepage/style.css，所以能正常加载。

一次性搞定所有目录（含动态创建）的方法 #

你不需要为每个子目录单独配置express.static，做好以下两点即可：

1. 修正HTML中的资源引用路径

确保所有资源的引用路径是基于views作为根目录的绝对路径。比如：

• homepage下的style.css应写成：

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

• 未来动态创建的new-dir下的script.js，引用路径为：

  <script src="/new-dir/script.js"></script>
  

这样app.use(express.static('views'))就能自动匹配所有子目录的资源，包括后续动态创建的目录。

2. 可选：用虚拟路径前缀避免冲突

若担心静态资源路径和业务路由冲突，可给静态资源加虚拟前缀，比如：

app.use('/static', express.static('views'));

资源引用路径对应修改为：

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

这种方式更清晰，也能避免路由与静态资源路径重叠的问题。

动态目录验证 #

只要在views下动态创建新目录（比如views/new-dir）并放入资源文件，通过/new-dir/xxx（或/static/new-dir/xxx）就能直接访问，无需修改任何Express配置，express.static会自动识别新的子目录。

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