产品构建后找不到 Angular 2\4 资产路径文件

Question

我有一个 Angular 应用程序，我在资产文件夹（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）时，会创建一个包含所有 js\css 文件的 dist 文件夹。如果我将这些文件移动到服务器的虚拟目录中，则存储在资产中的图像和字体将指向服务器的根目录，而不是指向虚拟目录。例如，我有位于 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

Answer 1

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

例如：

src: url("./assets/fonts/segoeuib.ttf"); 或
src: url("../../assets/fonts/segoeuib.ttf");

您还可以通过 angular-cli（如果您正在使用它）动态设置 baseHref，正如我在我的 answer 此处解释的那样。