如何使用 Express 将 CSS 和 JS 添加到我的 Node localhost 服务器？答案

【问题标题】：How do I add CSS and JS to my Node localhost server with Express?如何使用 Express 将 CSS 和 JS 添加到我的 Node localhost 服务器？
【发布时间】：2020-12-25 20:49:07
【问题描述】：

我试图加载一个简单的网页，但它只显示 HTML 框架，并且在控制台中有两个 CSS 和 JS 错误。

我的index.js 代码如下。我曾尝试使用 Express 的静态中间件，但仍然没有。我也试过用app.get分别询问CSS和JS文件，但是不接受。

const express = require('express');
const fs = require('fs');
const app = express();
app.use(express.static("my-website"));
app.get('/', (request, response) => {
    fs.readFile('./html/frontpage.html', 'utf8', (err, html) => {
        if(err){
            response.status(500).send('sorry, out of order')
        }
        response.send(html);
    })
})
app.listen(process.env.PORT || 3000, () => console.log('App available on http://localhost:3000'));

【问题讨论】：

app.use(express.static("my-website")); 如果您的服务./html/frontpage.html 可能是错误的，为什么不直接使用app.use(express.static("html")); 并摆脱加载frontpage.html？静态可以处理glitch.com/edit/#!/cactus-tin-nautilus?path=server.js%3A9%3A0
与所有有关提供静态文件的问题一样，我们需要查看您在页面中使用的准确 HTML 以引用 CSS 和 JS 文件。而且，我们需要知道这些文件在您的服务器文件系统中相对于 index.js 文件的确切位置。您可能只是在一端或另一端有一些路径错误。
请不要只是发布一个问题然后消失很长一段时间。这真的很难帮助你。您的问题缺少提供帮助所需的详细信息。你不在身边澄清。因此，您的问题已经获得了一些反对票和接近票，并且可能会因为不清楚而被关闭。当您在这里发帖时，您应该在第一个小时内多次查看是否需要澄清您的问题。否则，当大多数人看到您的问题时，您就错过了最佳回答机会，而且您的问题也可能因不清楚而被关闭。
<!DOCTYPE html> <html> <head> <title>Home - Aditya Thakur</title> <link href="../css/fpstyle.css" rel="stylesheet" type="text/css"/> <link rel="shortcut icon" type="image/png" href="../images/myFace.png"> <meta charset="utf-8"> </head> <body> </body> <footer> </footer> <script src="../js/front-page.js"></script> </html> 抱歉回复晚了。圣诞节我有一些私人家庭事务。

标签： node.js express web-development-server

【解决方案1】：

app.get("/", (req, res) => {
  let content = `  <html>
  <head>
    <link rel="stylesheet" href="/styles.css"> // express automatically looks into the static path
  </head>
  <header> 
  <div class="header">
  <ul>
   <li>
<a href="https://webpage adress"> 
 
   </li>
  </ul>
  </div>
  </header>
  <body>
    <section>
    <div>
    <h2>My Course Goal</h2>
      <p>This api is set for </p>
    </div>       
    </section>   
   <script src="/script.js" ></script>  // 
  </body>
</html>`;

  res.send(`${content}`);
});

将 styles.css 和 script.js 文件保存在您定义的静态文件夹中。

【讨论】：

【解决方案2】：

为了轻松完成您想做的事情，最好使用模板引擎，例如 pug(https://pugjs.org/api/getting-started.html)、ejs(https://ejs.co/) 或车把。它们将帮助您设置标题，并且它们将允许您轻松地将 css 集成到文件中

【讨论】：

使用模板引擎与正确提供 CSS 和 JS 文件没有任何关系。