介绍

主应用和子应用都是browser路由，而且这几个项目我放在了一个域名下

记录一下nginx的配置：

server {
    server_name lyt.bld365.com;
    listen 80;
    return 301 https://lyt.bld365.com$request_uri;
}

server {
    server_name lyt.bld365.com;
    listen 443 ssl;
    ssl_certificate      /root/certs/6171554__bld365.com.pem;
    ssl_certificate_key  /root/certs/6171554__bld365.com.key;

    ssl_stapling on;
    ssl_stapling_verify on;

    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
   
    ssl_prefer_server_ciphers on;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 3;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;

    # 医院pc 基座应用
    location / {
     add_header Cache-Control no-store;
     add_header Pragma no-cache;
     add_header Expires 0;
     gzip on;
     gzip_min_length 1k;
     gzip_comp_level 3;
     gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
     gzip_disable "MSIE [1-6]\.";
     gzip_vary on;

     index index.html;
     root /root/nginx/html/interHospital/web/main/; # 注意这里是root
     add_header Access-Control-Allow-Origin *;
     try_files $uri $uri/ /index.html; # 这里是为了处理 二级路由刷新为空的问题
   }

    # 医院pc 在线问诊 vue应用 /childdoctor路由就进入vue的子应用
    location /childdoctor {
     add_header Cache-Control no-store;
     add_header Pragma no-cache;
     add_header Expires 0;
     gzip on;
     gzip_min_length 1k;
     gzip_comp_level 3;
     gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
     gzip_disable "MSIE [1-6]\.";
     gzip_vary on;

     alias /root/nginx/html/interHospital/web/child/doctor/; # 注意这里是alias
     add_header Access-Control-Allow-Origin *;
     try_files $uri $uri/ /index.html;
   }

    # 医院pc saas商城 react应用 /childmall路由就进入react的子应用
    location /childmall {
     add_header Cache-Control no-store;
     add_header Pragma no-cache;
     add_header Expires 0;
     gzip on;
     gzip_min_length 1k;
     gzip_comp_level 3;
     gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
     gzip_disable "MSIE [1-6]\.";
     gzip_vary on;

     alias /root/nginx/html/interHospital/web/child/mall/; # 注意这里是alias
     add_header Access-Control-Allow-Origin *;
     try_files $uri $uri/ /index.html;
   }
}

root和alias的区别

root会用完整的url查找文件

root

location /web {
 root /root/nginx/html/app/; #
}

我访问https://www.***.com/web/index.html
nginx是以这个路径查找的：/root/nginx/html/app/web/index.html，会带上web

alias

location /web {
 alias /root/nginx/html/app/; #
}

我访问https://www.***.com/web/index.html
nginx是以这个路径查找的：/root/nginx/html/app/index.html，不会带上web

browser路由，二级路由刷新空白的问题

增加try_files

location /childmall {
 ...
 alias /root/nginx/html/interHospital/web/child/mall/;
 try_files $uri $uri/ /index.html;
}

例如访问https://www.***.com/childmall/web/goodsMng
会依次查找：

• /root/nginx/html/interHospital/web/child/mall/web/goodsMng——没找到
• /root/nginx/html/interHospital/web/child/mall/web/goodsMng/index.html——没找到
• /root/nginx/html/interHospital/web/child/mall/index.html——最终去找/index.html，找到了