Node.js使用Express框架时Pug文件无法加载style.css如何解决

存在的问题 #

• 静态资源服务路径配置不匹配：你的public文件夹存放在/demo/views/路径下，但express.static配置的搜索路径是项目根目录（即index.js所在的demo文件夹）下的public目录，根目录下不存在对应路径，导致静态资源服务完全未生效。
• 可选结构不规范问题：通常views目录仅用于存放Pug模板文件，静态资源文件夹public放在根目录和views平级更符合Express项目通用规范，也能避免后续路径混淆。
• 可选Pug语法问题：你提供的index.pug中<p>标签没有缩进在<body>节点下，会导致渲染结构不符合预期，可同步修正。

解决方案 #

方案1：不调整现有文件结构，仅修改配置 #

修改index.js中的静态资源配置代码，将静态资源搜索路径指向正确位置：

// 把原来的这行
// app.use(express.static(path.join(__dirname, 'public')));
// 替换为
app.use(express.static(path.join(__dirname, './views/public')));

修改后原有Pug中的CSS引入路径href='/views/dashboard/style.css'无需改动，即可正常加载。

方案2（更推荐）：调整项目结构符合通用规范 #

1. 首先调整文件结构，把public文件夹从views目录下移到项目根目录，同时把index.pug放到views目录下，调整后结构如下：

demo(Main Project/root)
    index.js
    views
        index.pug
    public
        views
            dashboard
                style.css

2. 原有index.js中的静态资源配置app.use(express.static(path.join(__dirname, 'public')));无需修改，Pug中的CSS引入路径也无需修改，即可正常加载。
3. 同步修正index.pug的缩进问题，避免渲染异常：

html
  head
    title Dashboard
    link(rel='stylesheet', href='/views/dashboard/style.css')
  body
    p Hi!

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