在使用 Express.js 进行前端开发时，我们通常需要引入 CSS 和 JavaScript 文件来美化页面和实现交互效果。本文将详细介绍在 Express.js 框架中如何引入 CSS 和 JavaScript 文件，并提供示例代码和指导意义。
引入 CSS 文件
在 Express.js 中引入 CSS 文件有两种方式：内置中间件和手动设置静态文件目录。
内置中间件
Express.js 内置了 express.static 中间件，可以用于提供静态文件，例如 CSS、图片和 JavaScript 文件等。
要使用 express.static 中间件，需要在 app.js 或 server.js 中添加以下代码：
app.use(express.static('public'));其中，public 是存放静态文件的目录。在上述代码中，我们将 public 目录设置为静态文件目录，这样在访问 http://localhost:3000/css/style.css 时，Express.js 就会自动从 public/css/style.css 文件中读取 CSS 样式。
手动设置静态文件目录
除了使用内置中间件外，我们还可以手动设置静态文件目录。
在 app.js 或 server.js 中添加以下代码：
app.use('/static', express.static(__dirname + '/public'));其中，static 是虚拟路径，用于访问静态文件，__dirname 表示当前文件所在的目录。在上述代码中，我们将 public 目录设置为静态文件目录，并将虚拟路径设置为 static，这样在访问 http://localhost:3000/static/css/style.css 时，Express.js 就会自动从 public/css/style.css 文件中读取 CSS 样式。
引入 JavaScript 文件
在 Express.js 中引入 JavaScript 文件也有两种方式：内置中间件和手动设置静态文件目录。
内置中间件
与引入 CSS 文件类似，我们可以使用 express.static 中间件来引入 JavaScript 文件。
在 app.js 或 server.js 中添加以下代码：
app.use(express.static('public'));在 HTML 文件中，可以使用以下代码引入 JavaScript 文件：
<script src="/js/main.js"></script>
在上述代码中，我们将 public 目录设置为静态文件目录，这样在访问 http://localhost:3000/js/main.js 时，Express.js 就会自动从 public/js/main.js 文件中读取 JavaScript 代码。
手动设置静态文件目录
与引入 CSS 文件类似，我们还可以手动设置静态文件目录。
在 app.js 或 server.js 中添加以下代码：
app.use('/static', express.static(__dirname + '/public'));在 HTML 文件中，可以使用以下代码引入 JavaScript 文件：
<script src="/static/js/main.js"></script>
在上述代码中，我们将 public 目录设置为静态文件目录，并将虚拟路径设置为 static，这样在访问 http://localhost:3000/static/js/main.js 时，Express.js 就会自动从 public/js/main.js 文件中读取 JavaScript 代码。
示例代码
以下是一个示例代码，用于演示在 Express.js 中如何引入 CSS 和 JavaScript 文件。
// www.javascriptcn.com code example
const express = require('express');
const app = express();
// 设置静态文件目录
app.use(express.static('public'));
// 路由
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});在 public 目录下，创建 css/style.css 和 js/main.js 文件，并在 HTML 文件中引入 CSS 和 JavaScript 文件：
// www.javascriptcn.com code example <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Express.js Demo</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <h1>Hello, Express.js!</h1> <script src="/js/main.js"></script> </body> </html>
运行代码后，在浏览器中访问 http://localhost:3000，就可以看到页面上的 CSS 样式和 JavaScript 效果了。
指导意义
通过本文的介绍，我们学习了在 Express.js 中引入 CSS 和 JavaScript 文件的两种方式：内置中间件和手动设置静态文件目录。使用内置中间件可以简化代码，但需要注意安全性问题；手动设置静态文件目录可以更加灵活，但需要手动编写代码。无论采用哪种方式，都需要注意文件路径和访问方式的正确性，以避免引入错误的文件或暴露服务器安全漏洞。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6796e69c504e4ea9bddddbfc