如何在express.static中加载CSS文件及各类静态资源？

问题分析 #

你当前的代码把项目根目录设为静态资源文件夹，这会导致所有文件（包括服务器脚本）都能被公开访问，既不安全也不规范，而且可能因为路径引用问题导致资源加载失败。下面是规范的解决方案：

1. 整理项目结构 #

先把静态资源统一放到public文件夹下，按类型分类，结构如下：

项目根目录/
├── server.js       # Express服务器文件
├── index.html      # 页面文件
└── public/
    ├── css/
    │   └── style.css   # 样式文件
    ├── js/
    │   └── main.js     # 前端JS文件
    └── images/
        └── hibiscus.jpg # 图片资源

2. 修改Express配置 #

更新服务器代码，引入path模块（处理路径更可靠），并将静态资源目录指向public：

const express = require('express')
const path = require('path') // 新增：引入path模块
const app = express()

// 修改静态资源配置，指向public文件夹
app.use(express.static(path.join(__dirname, 'public')))

const getId = (req, res) => {
  const id = req.params.id * 1
  res.sendFile(path.join(__dirname, 'index.html')) // 用path.join避免路径拼接问题
}

app.get('/hibiscos/:id', getId)

const port = 8000
app.listen(port, () => {
  console.log(`Servidor funcionando na porta ${port}...`)
})

3. 在HTML中正确引用静态资源 #

因为public是静态资源的根目录，所以引用时直接从子文件夹开始写路径，不需要带public：

<!-- 引用样式 -->
<link rel="stylesheet" href="/css/style.css">

<!-- 引用前端JS -->
<script src="/js/main.js"></script>

<!-- 引用图片 -->
<img src="/images/hibiscus.jpg" alt="木槿花">

关键说明 #

• path.join(__dirname, 'xxx')：避免不同操作系统的路径分隔符问题（Windows用\，Linux/macOS用/），让代码跨平台兼容。
• 把静态资源集中到public：只公开需要访问的前端资源，保护服务器脚本等敏感文件不被外界访问。
• 资源路径以/开头：确保不管当前路由是/hibiscos/1还是其他，都能正确找到静态资源。

内容的提问来源于stack exchange，提问作者Winston S. Lichucha