Nodejs 引用资源不能正常显示CSS及JQuery

Nodejs 引用资源不能正常显示CSS及JQuery

新建的header.html文件中有引用CSS、及JQuery等js文件 在express 中使用<% include header.html %>时，其中的CSS样式及JQuery不能加载

求node牛人解救啊，在线等待中……

7 回复

Node.js 引用资源不能正常显示 CSS 及 jQuery

问题描述

在使用 Express 框架开发一个 Node.js 应用时，我创建了一个名为 header.html 的文件，并在其中引用了 CSS 和 jQuery 文件。然而，当我尝试在 Express 中通过 <% include header.html %> 包含这个文件时，页面中的 CSS 样式和 jQuery 功能都无法正常加载。

解决方案

这个问题通常是由于静态文件路径配置不正确导致的。在 Express 中，你需要确保静态文件（如 CSS 和 JavaScript 文件）能够被正确地提供给客户端浏览器。

以下是一个简单的解决方案：

  1. 设置静态文件目录： 首先，你需要告诉 Express 哪些文件夹应该被视为静态文件夹，这样 Express 才能正确地提供这些文件。

    const express = require('express');
const path = require('path');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 渲染视图
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); // 使用 EJS 作为模板引擎

app.get('/', (req, res) => {
  res.render('index', { title: '首页' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

  2. 调整 HTML 文件中的引用路径： 确保你的 HTML 文件中引用的 CSS 和 JavaScript 文件路径是正确的。假设你将 CSS 和 JavaScript 文件放在 public/css 和 public/js 目录下，那么你应该这样引用它们：

    <!-- header.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/main.js"></script>
</body>
</html>

  3. 在主视图文件中包含 header.html： 在你的主视图文件（例如 index.ejs）中，使用 <%- include('header.html') %> 来包含 header.html 文件。

    <!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('header.html') %>
</head>
<body>
    <h1>欢迎来到首页</h1>
    <p>这是首页的内容。</p>
</body>
</html>

通过以上步骤，你应该能够解决 CSS 和 jQuery 文件无法正常加载的问题。确保路径正确无误，并且静态文件目录已经正确配置。


可能是因为你使用的是express3以上的版本，你需要在每一个用到样式的HTML中加载样式文件

楼上用express多久鸟?

嗯，却是使用的是3以上的版本，我以前也是在每一个ejs文件中重新引用CSS及js文件，但是这个应该不是最好的解决办法吧，希望找到根本解决的办法。

正常情况下html5的link只需要加href就可以，jade模板这么写：link(href="/bootstrap/dist/css/bootstrap.css")，但是如楼主所说会出现不加载的问题，改为：link(href="/bootstrap/dist/css/bootstrap.css",rel="stylesheet" type="text/css") 就可以了，具体原因不明了，可能跟安装的版本有关系

这跟后端有什么关系，脚本样式加载都是在浏览器，你在浏览器看看源码head是否引入

要解决这个问题，通常是因为静态资源（如CSS和JavaScript文件）没有正确地被服务器识别和提供。你需要确保Express框架配置了静态文件服务。

解决方案

  1. 确保静态文件目录正确设置： 首先，你需要使用express.static中间件来指定你的静态文件所在的目录。假设你的静态文件（如CSS和JavaScript文件）放在名为public的目录下，则可以这样配置：
const express = require('express');
const app = express();

// 设置静态文件目录为 'public'
app.use(express.static('public'));

// 其他路由配置
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/views/header.html'); // 假设 header.html 存在于 views 目录下
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));
  1. HTML文件中的路径问题： 确保在header.html中正确引用CSS和JavaScript文件。如果public目录是静态文件目录，则路径应相对于此目录。例如：
<!-- header.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS 文件的路径相对 public/css/styles.css -->
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/app.js"></script>
</body>
</html>

注意事项

  • public目录下的文件结构应与HTML文件中引用的路径一致。
  • 确保文件名和路径拼写正确。
  • 如果仍然无法加载资源，尝试在浏览器开发者工具（F12）的Network标签中检查是否请求失败，并查看具体错误信息。

通过以上步骤，你应该能够解决CSS和jQuery不能正常加载的问题。

回到顶部