Angular 5多个站点上的一个生产构建部署

不要在中指定整个URL base-href . 只使用 /app-name/web

--base-href 标志有助于添加 <base href="/"> 标记到HTML文件。这有助于解析应用程序中资源(RESTAPI、图像、JS等)的相对URL。

我不清楚你的基础网站是什么?它是目录名还是服务器名?

通常,对于任何Web应用程序URL,都有以下重要部分:

[protocol]://[HostName]:[port]/[AppName]

如果没有提供端口,它将根据协议使用默认端口(HTTP使用80作为默认端口)

几个例子:

http://www.site1.com/app-name/web

http://www.site1.com/my-app/web

http://www.site2.com:8080/app-name/web

https://www.site3.com/my-app

需要注意的重要一点是,您的Web服务器公开了一个端点(协议+主机+端口),您的Web应用程序可以在该端点上承载。然后,您的应用程序可以在不同的路径下访问更多的子应用程序(请参见示例URL 1和2)。

现在,如果您正尝试在不同的Web服务器上运行相同的应用程序,那么只需将应用程序目录提供给base href参数即可。

如果您试图在同一个Web服务器下运行多个子应用程序,那么您必须生成不同的构建,为 ——基础HREF 参数。

您可以将package.json更改为

"scripts": {
    ...
    "build_site1": "ng build --prod --base-href='www.site1.com/app-name/web'--output-path=dist/site1",
    "build_site2": "ng build --prod --base-href='www.site2.com/app-name/web'--output-path=dist/site2",
    "build_site3": "ng build --prod --base-href='www.site3.com/app-name/web'--output-path=dist/site3",
    "build_all": "npm run build_site1 && npm run build_site2 && npm run build_site3"
 }

然后运行

npm run build-all

您将在不同的子文件夹或 dist

为应用程序生成生成的单个命令

ng build --prod --base-href="/cms-dev/" --output-hashing=all

如果要忽略任何生成问题,可以将下面的选项添加到命令中。 AOT=假