两级深度视图下Node.js应用CSS/JS无法加载的问题求助

嘿，咱们先把问题根源揪出来：你访问http://localhost:1337/permits/Edit/1时样式和JS功能全丢了，核心原因是没给Express配置静态资源托管中间件，导致服务器找不到你的CSS、JS文件。

第一步：添加静态资源托管配置 #

打开你的app.js，在路由配置代码（比如app.use('/permits', permitsRouter)这类）之前，加上这段代码：

// 托管public目录下的静态资源
app.use(express.static(path.join(__dirname, 'public')));

这段代码会告诉Express：所有以/assets/开头的请求，都去public/assets目录里找对应文件（比如/assets/css/style.css会对应到public/assets/css/style.css）。

第二步：保持资源引用的绝对路径 #

你的header.hbs里写的/assets/css/bootstrap.min.css这种绝对路径是完全正确的，千万别改成相对路径（比如../assets/css/...）！因为相对路径会跟着URL层级变化——在/permits/Edit/1这个多级路径下，相对路径会被解析成/permits/assets/css/...，服务器自然找不到文件。

第三步：顺手修复路由里的小bug #

看你的路由代码，你定义了var ID = req.params.id;，但渲染视图时传的是id:id，这里大小写不匹配，会导致视图里拿不到正确的ID值，虽然不影响样式加载，但还是改一下更稳妥：

router.get('/Edit/(:id)', function (req, res, next) {
  var ID = req.params.id;
  res.render('permits/permitRequestEdit', {title: 'Edit my item', id: ID}); // 把id改成ID
});

验证效果 #

重启你的Node.js服务，再访问http://localhost:1337/permits/Edit/1，应该就能正常加载样式和JS了。如果还是不行，打开浏览器F12的Network面板看看：

• 如果CSS/JS请求是404状态，说明静态资源路径配置错了，检查path.join(__dirname, 'public')是不是指向了正确的文件夹；
• 如果是200状态，那可能是CSS/JS本身的代码问题，和路径无关。

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