angular - 无法解码下载的字体，使用 nginx 部署 Angular 6 应用程序时出现 OTS 解析错误

Question

我已经在 ngnix 上部署了具有以下结构的 Angular dist 文件夹。但是得到 Failed to decode downloaded font: host/rfid/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0; OTS 解析错误:版本标签无效错误。

下面是我如何添加超棒的字体。

package.json

"dependencies": {
-------
"font-awesome": "^4.7.0",
--------
}

angular.json

"styles": [
-----,
"node_modules/font-awesome/scss/font-awesome.scss",
-----
]

这是我部署 dist 文件夹的路径。

/user/www/data/rfid/dist

以下是我的 nginx 配置文件 default.conf。

proxy_cache_path /tmp/nginx levels=1:2 keys_zone=nginx_cache_zone:10m inactive=60m;
proxy_cache_key "$scheme$request_method$host$request_uri";

client_max_body_size 20M;
proxy_read_timeout 600;

server {
    listen 80 default_server;
    server_name something;
    location /rfid/ {
      alias /user/www/data/rfid/dist/;
      try_files $uri$args $uri$args/ /rfid/index.html;
   }
}

让我也包括我的构建的样子。

我在这里错过了什么？提前致谢。

编辑:如果这是将查询字符串附加到正在查找文件的 url 的问题，那么当我仅指定依赖项并添加 sass 文件时我可以做什么？

Answer 1

当我将 Font Awesome 4.7.0 作为 NPM 依赖项引入时，OP 出现了同样的问题，无法控制修改 font-url。

我们最终改变了 Nginx 的 try_files配置也检查没有 $args 的 $uri。

所以来自:

try_files $uri$args $uri$args//rfid/index.html;

你可以选择:

try_files $uri$args $uri$args/$uri $uri//rfid/index.html;

如果您要采用这种方法，请确保您了解对网站其余部分的影响。

另一种选择是升级到 Font Awesome 5.x，它不再使用版本字符串，根据提交者的 comment和 this GitHub 问题。