Angular 2\4生产版本构建后无法找到资产路径文件

Question

我有一个Angular应用程序，我已经将一张图片和一个自定义字体放在 assets 文件夹下 (src/assets/images/bg.jpg 和 src/assets/fonts/segoeui.ttf)。

我在 scss 文件中引用了 bg.jpg 和 segoeui.ttf，像这样：

styles.css:

@font-face {
    font-family: "AppFont";
    src: url("/assets/fonts/segoeui.ttf");
}

@font-face {
    font-family: "AppFont";
    src: url("/assets/fonts/segoeuib.ttf");
    font-weight: bold;
}

html,
body {
    font-family: 'AppFont', Verdana, Geneva, Tahoma, sans-serif;
}

login.scss：

#login {
    background: url("/assets/images/bg.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
}

我还在使用延迟加载模块。在开发模式下（运行ng serve时）一切正常。但是，当我发布生产版本（ng build --prod）时，会创建一个dist文件夹，里面包含所有的js/css文件。如果我将这些文件移动到服务器的虚拟目录中，那么存储在assets中的图片和字体将指向服务器的根目录，而不是指向虚拟目录。例如，我的项目位于myserver.com/myproject/index.html，但这个应用程序查找的图像是myserver.com/assets/bg.jpg，而不是myserver.com/myproject/assets/bg.jpg。自定义字体也有同样的问题。请问您是否遇到过这个问题？如果有，请告诉我如何解决。

以前，即使是构建后的js/css文件也是从根目录引用的，而不是从虚拟目录引用的。为了解决这个问题，我将index.html中的<base href="/">更改为<base href="./">

版本详细信息：

@angular/cli: 1.0.1
node: 6.10.2
os: win32 x64
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.1

- Deepak

Answer 1

您需要更改所有路径，使它们相对于其新的URL路径为./或../。在/assets中的/将始终相对于域的根目录。

例如： src: url("./assets/fonts/segoeuib.ttf");或
src: url("../../assets/fonts/segoeuib.ttf"); 您还可以通过angular-cli（如果使用的话）动态设置baseHref，如我在这里回答中所解释的那样。

- Zze

---

谢谢Zze，使用-bh在发布构建时设置baseHref有所帮助。现在应用程序可以从正确的位置获取图像和字体。 - Deepak

@Zze，这个解决方案可以工作，但现在我的资产有两份副本。#1在 dist/assets/ 文件夹中。＃2相同文件的新副本位于dist的根目录下：dist/。我不需要两份副本，怎么办？？？？ - Gil Epshtain