Express框架下views目录index.hbs无法访问public目录css、js文件如何解决

问题修复方案 #

存在的问题 #

• 静态资源托管代码被注释，Express无法读取public目录下的css、js文件
• 视图目录配置错误，配置视图存放路径需要使用views参数而非/
• 重复定义根路径路由，第二个app.get('/')会覆盖前面的渲染逻辑，访问根路径直接返回字符串Hello不会加载hbs模板
• hbs中使用相对路径引用静态资源，容易出现路径匹配错误

修正后的代码 #

index.js 代码

const express = require('express')
const path = require('path')
const app = express()
const port = 3000

// 放开静态资源托管配置，确保路径指向正确的public目录
const publicPath = path.join(__dirname, 'public')
app.use(express.static(publicPath))

// 修正视图配置
app.set('view engine' ,'hbs');
app.set('views', path.join(__dirname, 'views'));

// 仅保留渲染模板的根路由，删除重复的返回Hello的路由
app.get('/', (req, res) => {
  res.render('index', {})
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

index.hbs 资源引用修改

改为绝对路径形式，避免相对路径匹配错误：

<link rel="stylesheet" href="/css/style.css">
<script src="/javascript/main.js"></script>

目录结构校验 #

确保public目录和index.js处于同一层级，public目录下存在css/style.css、javascript/main.js对应文件即可正常加载资源。

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