Express: Cách phân phối phông chữ tuyệt vời như nội dung tĩnh?

Question

Tôi sử dụng chuyển phát nhanh để phân phối nội dung tĩnh trên trang web của mình và tôi muốn kết hợp FontAwesome (npm install font-awesome). Tuy nhiên trong css của Font-Awesome, các liên kết đến các tệp phông chữ được nối thêm với một chuỗi truy vấn chứa thông tin phiên bản phù thủy express không hiểu.

Có ai gặp phải vấn đề này và tìm thấy bản sửa lỗi không? Có một cách đơn giản để làm cho rõ ràng bỏ qua các qs cho nội dung tĩnh?

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 

Cập nhật Như @Denys SEGURET chỉ của chúng tôi nó không phải là qs như tôi đã nghĩ. Yêu cầu thực tế là cho /fonts/fontawesome--webfont.woff?v=...

Giải pháp

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

Answer 1

Khi trình duyệt của bạn yêu cầu /static/fontawesome--webfont.woff?v=4.6.3, máy chủ là miễn phí để bỏ qua phần ?v=xxx. Và đó là những gì được thực hiện bởi mô-đun express.static. Điểm của phần đó là ngăn các trình duyệt và proxy sử dụng phiên bản cũ của tệp.

Vì vậy, vấn đề không phải là nơi bạn nghĩ. Vấn đề là bạn ánh xạ tĩnh route đến hai máy chủ. Người đầu tiên không tìm thấy các tập tin và các vấn đề một 404.

(Dirty) Giải pháp 1:

Thay đổi bản đồ của bạn

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

và thay đổi URL:

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

Tôi nói nó bẩn vì bạn đang phục vụ nội dung không được kiểm tra của một mô-đun nút (được cập nhật khi bạn cập nhật npm). Bạn không bao giờ nên làm điều đó.

Giải pháp 2:

Tạo một thư mục tĩnh (tên không quan trọng) và đặt bên trong các nội dung của ./node_modules/font-awesome/css và ./node_modules/font-awesome/fonts thư mục sau đó chỉ cần lập bản đồ nó bằng cách sử

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