Express中如何引入express.static根目录外的JS文件？为何相对路径失效？

1. Express静态资源的访问规则 #

你只配置了app.use(express.static('public'))，这意味着只有public目录下的文件会被Express作为静态资源对外暴露。src目录并没有被设置为可访问的静态资源目录，所以无论你用哪种相对路径，浏览器请求http://localhost:3000/src/testdrive/foo.js时，Express找不到对应的可访问资源，直接返回404。

2. 浏览器相对路径的解析逻辑 #

你的index.html是通过http://localhost:3000/index.html访问的（因为public是静态根目录，根URL对应public目录）：

• 用../src/testdrive/foo.js时，浏览器会从当前页面URL的路径（/）向上跳一级再拼接路径，结果还是http://localhost:3000/src/testdrive/foo.js
• 用src/testdrive/foo.js时，浏览器直接在当前路径（/）后拼接，结果同样是http://localhost:3000/src/testdrive/foo.js

两种情况最终请求的URL都指向未被Express开放的src目录，自然无法获取文件。

3. 为什么添加app.use('/scripts', express.static('src'))有效 #

这条配置把src目录映射到了URL路径/scripts下：当浏览器请求/scripts/testdrive/foo.js时，Express会去服务器本地的src/testdrive/foo.js查找文件并返回，相当于给src目录开了一个合法的访问入口，所以能正常加载。

另外要注意，这种设计是Express的安全机制：默认不会暴露服务器上的所有目录，只有明确通过express.static注册的目录才允许外部访问，避免源码、配置等敏感文件被随意获取。

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