这不是一个重复的问题:
这个问题 解释了这个问题,但该项目没有使用angular-cli构建,因此我没有webpack.config
文件。
虽然我所描述的问题显然是关于正确设置base_url的,但它与这个问题不同,后者是关于设置angular以向类似API的base_url发送请求。
我的项目在本地主机上构建和运行,而且还可以在github:pages
上运行(即使所有css都正确加载)。唯一在github:pages上不起作用的是图片,它们都返回404(即使我可以通过直接在浏览器中导航到assets文件夹来查看它们)。
问题在于,在本地主机上,angular-cli在主机名后没有子文件夹运行该项目。但是在github:pages
上需要。
例如,如果项目名称为testapp
,则在github:pages
上部署在这里:
https://<username>.github.io/testapp
图像位于
src/assets/images
在 Angular 2 组件中,它们被引用为相对路径的 CSS,例如:
background-image: url('../../assets/images/dining-room.png');
那么,我应该如何配置Angular 2的生产部署文件,以便在生产环境中路径变为:
background-image: url('testapp/assets/dining-room.png');
我知道
github:pages
基于Jekyll,我也理解这个解释,但我不知道如何配置angular-cli项目以使其意识到github:pages
使用一个文件夹来部署应用程序。
更新1 到目前为止,我已经发现命令行可以使用base_href选项来部署到
github:pages
。所以我可以这样做:ng github-pages:deploy --base-href /testapp/
然后我可以在/dist文件夹中看到HTML文件已更改以包含base href,如下所示:
<base href="/testapp/">
我本来以为这会自动解决问题,但图片仍然返回404错误。像你期望的那样,此base_href并未自动注入相对路径中。在本地环境中,index.html文件有
<base href="/">
,显然可以正常工作。更新2:
尝试解决此问题时,我开始相信这与Angular构建组件的方式有关。可以在这里找到一个很好的解释。
编辑:添加了angular-cli.json
{
"project": {
"version": "1.0.0-beta.22-1",
"name": "floorbook"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "fb",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}