Node.js如何从深度路由链接访问静态资源文件？

问题原因 #

你遇到的问题本质是静态资源引用路径和express静态挂载规则不匹配，具体有两个触发点：

• 页面内的静态资源用了相对路径引用：相对路径会以当前页面的路由作为基准拼接资源地址。在/home这类一级路由下，拼接出来的地址刚好匹配你挂载的静态资源路径；但在/b/test这类多级路由下，会在资源路径前自动拼接/b/前缀，导致请求地址和实际静态资源存放地址不匹配，触发404。
• 现有express静态挂载配置不合理：你单独挂载public下的每个子文件夹，相当于把所有子文件夹下的资源都直接暴露在服务根路径下，既容易出现资源重名冲突，也不方便统一管理路径。

修复方案 #

1. 简化静态资源挂载规则，直接挂载public根目录，替换原来的5行静态配置即可：

app.use(express.static('public'))

2. 将页面中所有静态资源（js、css、图片、上传文件等）的引用路径统一修改为根路径开头的绝对路径，示例如下：

<!-- 错误写法（相对路径） -->
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/style.css">
<img src="imgs/avatar.png">

<!-- 正确写法（根绝对路径） -->
<script src="/js/index.js"></script>
<link rel="stylesheet" href="/css/style.css">
<img src="/imgs/avatar.png">

修改完成后，不管你在哪一级路由页面下，浏览器都会直接从服务根路径请求静态资源，不会受当前页面路由层级的影响。

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