angular 笔记之 nginx配置多个angular单页面项目

最新推荐文章于 2024-01-02 11:51:57 发布

原创最新推荐文章于 2024-01-02 11:51:57 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

Angular-笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在单一服务器及IP下，通过配置nginx与调整Angular项目打包参数，实现多个项目共存，避免端口冲突，同时保持资源请求路径正确。

在同一个服务器,同一个IP下部署多个angular项目,又不想开太多端口号,应该如何配置和打包

打包命令
项目1:ng build --base-herf/project1/item --aot --prod
项目2:ng build --base-herf/project2/item --aot --prod
–base-herf/**/*,会在html的 < head >中增加 < base href="/ **/ *">
资源文件请求时，会自动在资源文件前增加–base-href / **/ * 中的 / ** 部分

服务器上文件
windows：

 项目1：D:\html\aaa\（aaa为文件名示例）
 
 项目2：D:\html\bbb\（bbb为文件名示例）

linux：

 项目1：\...\html\aaa\（aaa为文件名示例）
 
 项目2：\...\html\bbb\（bbb为文件名示例）

nginx配置
windows:

 location /project/item{
     rewrite .* /index.html break;
     root D:/html/aaa;
 }
 location /item{
     alias D:/html/aaa;
 }
 location /project2/item{
     rewrite .* /index.html break;
     root D:/html/bbb;
 }
 location /project2{
     alias D:/html/bbb;
 }

linux:

 location /project/item/ {
     rewrite .* /index.html break;
     root /.../html/aaa/;
 }
 location /project/ {
     alias /.../html/aaa/;
 }
 location /project2/item/ {
     rewrite .* /index.html break;
     root /.../html/bbb/;
 }
 location /project/ {
     alias /.../html/bbb/;
 }

参考链接:http://www.mamicode.com/info-detail-2349020.html