Node.js新手使用Express搭建项目本地访问CSS/JS报404求路径正确写法

问题原因 #

你配置的Express静态资源路由规则与HTML中的资源引用路径不匹配，且静态资源未存放到指定映射目录，才会触发404报错。

修复步骤 #

1. 调整项目文件结构 #

你代码中app.use('/static', express.static(__dirname + '/public'))的配置含义是：所有/static前缀的请求，都会匹配项目根目录下public文件夹内的文件。首先需要将styles.css、index.js两个静态资源移动到public目录下，最终文件结构如下：

项目根目录
├── 你的Node.js启动文件（如app.js）
├── index.html
└── public
    ├── styles.css
    └── index.js

2. 修改HTML中的资源引用路径 #

将原有相对路径改为带/static前缀的绝对路径即可：

<link href="/static/styles.css"> <!-- 1 link -->
<script src="/static/index.js"></script> <!-- 2 link -->

可选调整方案 #

如果你不想在资源路径前加/static前缀，可以直接修改Express的静态资源配置，移除路由前缀：
将原有代码

app.use('/static', express.static(__dirname + '/public'));

修改为

app.use(express.static(__dirname + '/public'));

修改后HTML中原有的资源引用路径无需改动即可正常生效。

注意：HTML中引用静态资源建议统一使用开头带/的绝对路径，避免嵌套路由场景下相对路径自动拼接出错。

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