Express.js静态资源可正常加载CSS文件，为何无法加载JavaScript文件？

问题根源 #

你配置的静态资源服务app.use express.static('public')本身是正常的——毕竟CSS文件能通过link(rel="stylesheet" href="/css/index.css")成功加载，说明静态资源的基础路径配置没问题。

导致script(src='/js/watch.js')加载失败的核心原因是：存放JS文件的文件夹名称里包含空格。

为什么会出问题 #

浏览器请求资源时会自动把URL里的空格编码成%20，但如果你的实际文件系统中JS文件夹是带空格的（比如叫js files），那你代码里写的/js/watch.js路径就和实际路径不匹配，服务器自然找不到对应的文件。

解决办法 #

直接修改带空格的文件夹名称，把空格去掉，或者换成连字符（-）、下划线（_）这类适合URL的字符。比如把带空格的JS文件夹重命名为js，让代码里的引用路径/js/watch.js和实际文件系统的路径完全对应上就行。

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