Express配置express.static后加载bundle.js仍报404错误如何解决？

1. 确认静态文件存放位置 #

你配置的Express静态资源根目录为__dirname + "/public"，即Express启动文件所在目录下的public文件夹。请先检查bundle.js是否确实存放在该public目录下：

• 如果文件放在public的子目录（比如public/js/），前端引用路径要对应修改为/js/bundle.js
• 如果文件和Express启动文件放在同一级目录，没有放入public文件夹，就会直接返回404

2. 检查静态资源中间件挂载顺序 #

Express中间件按代码书写顺序执行，请确保app.use(express.static(__dirname + "/public"))代码写在所有业务路由定义之前。如果放在路由之后，静态资源请求会被业务路由先拦截，无法走到静态资源处理逻辑。

3. 修复路径拼接逻辑 #

不同操作系统的路径分隔符存在差异，直接用字符串拼接路径可能出现异常，推荐用Node.js内置path模块处理路径拼接，修改配置代码如下：

const path = require('path')
app.use(express.static(path.join(__dirname, 'public')))

4. 直接访问验证资源可用性 #

启动服务后，直接在浏览器地址栏输入http://你的服务域名+端口/bundle.js，如果仍然返回404，再排查两个点：

• 打包脚本是否正常生成了bundle.js，文件是否有可读权限
• 静态资源中间件是否配置了挂载前缀，比如配置为app.use('/assets', express.static(...))的话，前端引用路径需要对应改为/assets/bundle.js

临时调试方案 #

如果需要先推进表单功能开发，可以暂时把bundle.js的代码直接写入页面的<script>标签内，先绕过静态资源加载问题调试后续逻辑。

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