Express：如何将 font-awesome 作为静态内容提供？

Question

我使用 express 在我的网站上提供静态内容，我想合并 FontAwesome (npm install font-awesome)。然而，在 Font-Awesome 的 css 中，字体文件的链接附加了一个包含版本控制信息的查询字符串 express 不理解。

有没有人遇到过这个问题并找到了解决办法？有没有简单的方法让 express 忽略静态内容的 qs？

var express = require('express')
var app = express()

app.use('/static', express.static('./node_modules/font-awesome/css'))
app.use('/static', express.static('./node_modules/font-awesome/fonts'))

// response 200 | /static/font-awesome.min.css
// error 404    | /static/fontawesome--webfont.woff?v=4.6.3

更新 正如@Denys Séguret 指出的那样，这不是我想象的问题。实际请求是 /fonts/fontawesome--webfont.woff?v=...

解决方案

app.use('/fonts', express.static('./node_modules/font-awesome/fonts'))

Answer 1

当您的浏览器请求 /static/fontawesome--webfont.woff?v=4.6.3 时，服务器可以随意忽略 ?v=xxx 部分。这就是 express.static 模块所做的。该部分的重点是防止浏览器和代理使用旧版本的文件。

所以问题出在您认为的地方。问题是您将静态 route 映射到两个服务器。第一个没有找到文件并发出 404。

（脏）解决方案 1：

更改映射

app.use('/static', express.static('./node_modules/font-awesome'))

并更改 URL：

/static/fonts/fontawesome--webfont.woff?v=4.6.3

我说它很脏，因为您正在提供节点模块的未经检查的内容（当您执行 npm 更新时会更新）。你永远不应该那样做。

解决方案 2：

创建一个静态目录（名称无关紧要）并将 ./node_modules/font-awesome/css 和 ./node_modules/font-awesome/fonts 目录的内容放入其中，然后使用

映射它

app.use('/static', express.static('./static'));