prod构建后找不到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;
}

我也在使用延迟加载的模块.在开发模式下(当我运行服务时),一切都按预期工作.但是,当我发布prod build(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(如果你正在使用它),我在这里的答案中解释.