无法解码下载的字体,使用nginx部署的Angular 6应用程序上的OTS打包错误

Question

我在ngnix上部署了具有以下结构的角度dist文件夹.但得到Failed to decode downloaded font: host/rfid/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0; OTS parsing error: invalid version tag错误.

这是我如何包含字体 - 真棒.

的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 conf文件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 问题跟踪器中，看起来有些人也遇到过类似的问题：

?v=4.6.3尝试从 CSS 中删除查询字符串。

例子：

@font-face {
  font-family: 'FontAwesome';
  src: font-url("font-awesome/fonts/fontawesome-webfont.eot");
  src: font-url("font-awesome/fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), font-url("font-awesome/fonts/fontawesome-webfont.woff2") format('woff2'), font-url("font-awesome/fonts/fontawesome-webfont.woff") format('woff'), font-url("font-awesome/fonts/fontawesome-webfont.ttf") format('truetype'), font-url("font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

希望有帮助。