2016-07-25 71 views
5

我使用express来为我的网站提供静态内容,并且我想要合并FontAwesome(npm install font-awesome)。但是,在Font-Awesome的css中,字体文件的链接附加了一个查询字符串,其中包含女巫表达不明白的版本信息。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塞居勒指出我们这不是QS,因为我原本以为。实际的请求是/fonts/fontawesome--webfont.woff?v=...

解决方案

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

回答

5

当你的浏览器请求/static/fontawesome--webfont.woff?v=4.6.3,服务器可以自由地忽略?v=xxx部分。这就是express.static模块所做的。该部分的目的是防止浏览器和代理使用旧版本的文件。

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

(脏)解决方案1:

更改映射

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

并更改网址:

/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')); 
+0

由于地图吧,我见现在它正在寻找'''/fonts/fontawesome-webfont.ttf?v = ...'中的字体' – MatUtter

+0

_“你永远不应该这样做。”_我不同意。如果你锁定了一个特定的依赖关系,我认为即使没有选中'node_modules',我们也不会将它用作静态路径。 –

+0

@PatrickRoberts即使您认为您可以通过semver锁定“安全地”完成此任务,但为完整的节点模块提供服务没有任何意义。可以说最少的是它太过懒惰和肮脏。 –