我有一个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
dist/assets/
文件夹中。#2相同文件的新副本位于dist的根目录下:dist/
。我不需要两份副本,怎么办???? - Gil Epshtain