prod build

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

您需要更改所有路径，使其与新的网址路径相对./或../。 /中的/assets将始终相对于域的根目录。

例如：

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

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