Express服务下HTML引入的app.js脚本无法正常运行问题求助

• 确认访问路径是否匹配服务配置 #

你当前server.js的根路由GET /默认返回数据库查询的JSON数据，没有返回index.html页面：

• 如果直接访问http://localhost:3030，看到的是JSON字符串，自然不会触发JS逻辑
• 如需访问页面可新增路由配置，放在app.use(express.static('src'))之后即可：

app.get('/index', (req, resp) => {
  resp.sendFile(__dirname + '/index.html')
})

配置完成后访问http://localhost:3030/index即可加载对应页面。

• 修正静态资源引用路径 #

你配置了app.use(express.static('src'))，代表src目录下的文件会被直接映射到服务根路径：

• src/app.js的线上访问路径是/app.js，不是/src/app.js
• 修改index.html的script标签为以下代码即可：

<script src="/app.js"></script>

• 兜底校验步骤 #

  1. 打开浏览器F12开发者工具，切换「控制台」标签，查看是否有JS报错、404资源加载错误
  2. 切换「网络」标签，刷新页面查看app.js的请求返回内容是否为你编写的测试代码
  3. 部分浏览器会默认拦截非用户交互触发的alert弹窗，可以把测试代码换成console.log('test')，查看控制台是否有输出更稳妥
  4. 如果是本地直接双击打开HTML文件，右键查看页面源码，点击script标签的src链接，确认能正常打开app.js文件即可排除路径问题

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