我的应用程序将在多台机器上使用，并且每次都可能位于不同的位置。例如，回家路线可能位于以下任何位置:
本地主机:9000/家
本地主机:9000/abc/home
localhost:2000/yet/another/location/home
因此，我想确保我的应用无论需要在哪里查找其 Assets 都能正常运行。我所有的路径都是相对的，所以希望这是朝着正确方向迈出的一步，就像这样:
<link rel="stylesheet" href="assets/global-styles.css">
在我的组件模板中，像这样:
<img src="assets/components/dashboard/images/foo.png" />
这是我到目前为止尝试过的:
我修改了我的 <base>属性所以手动抓取端口之后和“home”之前的 URL 部分，如下所示:
<html>
<head>
<script>
// manually sets the <base> tag's href attribute so the app can be located in places other than root
var split = location.pathname.split('/');
var base = "";
for (var i = 0; i < split.length - 1; i++) {
base += split[i];
if (i < split.length - 2) {
base += "/";
}
}
window['_app_base'] = base;
document.write("<base href='" + base + "' />");
</script>
....
到目前为止的例子，如果用户在 localhost:9000/hello/home 加载主页，那么 <base>标签看起来像这样:
<base href='/hello' />
该代码还将一个变量设置为相同的值，然后我在我的 app.module.ts 中使用它来提供一个新的基值:
从“@angular/common”导入 { APP_BASE_HREF }；
@NgModule({
declarations: [...],
imports: [...],
providers: [
...,
{ provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' }
]
});
然而，尽管如此，该应用仍在寻找 Assets 文件夹中的 Assets ，它认为该文件夹仍在根位置。
GET http://localhost:9000/assets/ionic-styles.css net::ERR_ABORTED
GET http://localhost:9000/inline.bundle.js net::ERR_ABORTED
GET http://localhost:9000/assets/font-awesome-4.6.3/css/font-awesome.min.css net::ERR_ABORTED
GET http://localhost:9000/assets/bootstrap.min.css net::ERR_ABORTED
GET http://localhost:9000/assets/global-styles.css net::ERR_ABORTED
GET http://localhost:9000/polyfills.bundle.js net::ERR_ABORTED
GET http://localhost:9000/styles.bundle.js net::ERR_ABORTED
GET http://localhost:9000/vendor.bundle.js net::ERR_ABORTED
我错过了什么？我还看到人们采取了一种方法，他们在 ng build 命令中指定了一个路径……在上面的所有内容之上是否有必要？我真的很想避免为每个人安装一个单独的构建，但如果需要这样做，请告诉我。
谢谢。
更新:
令人沮丧的几天后，我的应用程序可以使用上述问题中显示的代码运行。原来我只需要有 <script>在我的 <head>修改 <base> .无需在 ngModule 提供程序中添加 APP_BASE_HREF。但是，添加 APP_BASE_HREF 也不会破坏任何东西......
这是其中一个问题，在将问题搁置一周并重新解决后，它“刚刚奏效”。也许发生了某种缓存问题？毕竟，我曾尝试更新 <base>上周，但它仍然在错误的地方寻找 Assets 。尽管我上周尝试调试此问题时已多次清除浏览器缓存，但我不确定缓存是否真的是问题所在。
很抱歉，这个答案对以后遇到这个问题的人没有帮助。我真的不知道是什么解决了这个问题。我最好的猜测是以下答案之一可能会为您指明正确的方向。似乎无论我尝试什么，它都因为某种未知原因而无法正常工作。
如果您遇到此问题并有具体问题，请随时给我发消息或发表评论，我会告诉您我是如何设置的。
最佳答案
您只需在您的 index.html
base href
<base href="./">
您可以手动或在构建时执行此操作
ng build --base-href ./
除了将内容从 dist 目录复制到服务器的 /whatever/is/your/root/ 之外，您不需要在 Angular 方面做任何其他事情目录。
现在您可以使用 url 访问您的 angular 应用程序
localhost:port/whatever/is/your/root/index.html
更新
您可能想在您的服务器上做更多的事情。但是，您如何操作将完全取决于您在服务器上使用的技术。
将
localhost:port/whatever/is/your/root/index.html作为您的默认主页。为了使您的 Angular 应用程序的 html5 路由 url 在浏览器刷新时正常工作，您应该将所有请求转发到 url
localhost:port/whatever/is/your/root/**到localhost:port/whatever/is/your/root/index.html。 请注意，您应该转发请求而不是发送重定向。
关于angular - Angular 中 Assets 的动态位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48347430/