Angular 2 产品构建后未找到资产路径文件

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，正如我在此处所解释的那样。

Angular 2 产品构建后未找到资产路径文件

Angular 2\4 assets path files not found after prod build

router

module

lazy-loading

angular