同域名下挂载不同前端项目--示例

前提条件：

• 目前有个项目已经挂到域名下(以下简称主应用)，现在要将别的两个项目也挂载到这个域名下（以下简称子应用）
• 所有项目都有自己的nginx

开始配置：

1、约定项目前缀(假设两个项目)

/ehr-workBench     /ehr-admin

2、在主应用的nginx - http 下添加代理服务(该地址为子应用上线后的IP地址)

upstream workBench { 
    server 10.152.17.47:60508;
    server 10.152.17.48:60508;
    server 10.152.17.49:60508; 
}

upstream admin { 
    server 10.152.17.47:60509;
    server 10.152.17.48:60509;
    server 10.152.17.49:60509; 
}

3、在主应用的nginx配置文件中添加代理配置

location /ehr-admin { #/ehr-admin为约定的项目前缀
    proxy_pass http://admin/;  #结尾的"/"必须加  admin为上面upstream定义的名字             
}

4、在主应用中设置nginx转发携带Headers

underscores_in_headers on;

5、添加子应用的api请求代理配置（子应用的api代理要写在主应用中）

location /ehrApi { #此处的ehrApi与前端src/common/http中的前缀保持一致
    add_header Access-Control-Allow-Credentials true;
    proxy_pass http://demo/http/ehr; #此处为主应用接口代理地址，子应用也用
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;            
}

6、修改子应用配置文件

• 在根目录的config文件下找到index.js,修改build下assetsPublicPath

assetsPublicPath: '/ehr-workBench' // /ehr-workBench 为约定的项目前缀

• 在路由文件中添加以下代码

base:'/ehr-workBench',

• 修改nginx配置文件---静态资源位置(这里是子应用的nginx，代理自身的静态资源，api在主应用中添加)

location / {
    root /usr/share/nginx/html;
    index index.html;                
}

• 若项目中涉及到前端进行的模板下载，该模板需要放置到主项目的static文件夹中,页面代码如

<a href="/static/pfxz.pdf" download="评分细则.pdf" style="color: #409eff;font-size:14px;margin-left:10px;">下载模板</a>