Question

我在Angular 4中开发了一个应用程序，并使用了Bootstrap Glyphicons和Font Awesome。在我们将应用程序部署到服务器之前，一切正常。可以通过网址http://hostaddress/applicationame访问该应用程序。我遇到的问题是，当我发布应用程序时，Glyphicons和Font Awesome的字体文件会转到ng build上生成的所有文件的同一目录。

为了使应用程序正常工作，我不得不手动编辑index.html并更改对Angular脚本的引用，如下所示：

<script type="text/javascript" src="/applicationname/inline.bundle.js"></script>
<script type="text/javascript" src="/applicationname/polyfills.bundle.js"></script>
<script type="text/javascript" src="/applicationname/scripts.bundle.js"></script>
<script type="text/javascript" src="/applicationname/styles.bundle.js"></script>
<script type="text/javascript" src="/applicationname/vendor.bundle.js"></script>
<script type="text/javascript" src="/applicationname/main.bundle.js"></script>

但是由于我不知道Glyphicons和Font Awesome文件的引用方式和位置，我不断收到这些文件的404错误，因为它试图访问

http://hostaddress/fontawesome-webfont.fee66e712a8a08eef580.woff

而不是

http://hostaddress/applicationname/fontawesome-webfont.fee66e712a8a08eef580.woff

如何解决这个问题？

Answer 1

如果您正在使用Angular-CLI并且想要自托管文件，那么您可以通过CLI查看文件的位置来执行此操作，如果您查看.angular-cli.json，您将看到

  },

    "apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico",
    ".htaccess",
    "mail.php"
  ],

你可以看到在Assets数组中你可以把文件放到你想要的任何地方，默认是/ src文件夹，例如我自己托管我的mail.php文件，你把它放在/ src中，当你使用CLI构建时它将其复制到DIST文件夹的ROOT

还要确保您设置网站的基本href。看起来你正在使用＆＃34; /＆＃34;作为基础href而不是/ applicationname /

如何改变Glyphicons和Font Awesome文件的href？

1 个答案: