nginx 单个端口布置多个单页应用

Posted gsgs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nginx 单个端口布置多个单页应用相关的知识,希望对你有一定的参考价值。

目标:

       1、在80端口布署2个单页应用

       2、单页应用采用h5 history路由。

       3、地址栏 以 ‘http://ip/1/‘ 开头, 则 去第一个单页应用,以‘http://ip/2/’开头 去第二个单页应用。

 

需要修改:

     1、前端代码: 第一个单页应用应以 1作为基础路由,第二个单页应用应以2作为基础路由。例: 第一个应用中去 /home主页,则地址栏是 /1/home 。

     2、打包文件publicPath改为 ‘1‘,使引用路径都加上/1/。例:

<script src=/1/js/chunk-vendors.2a8e7123.js> </script> <script src=/1/js/app.dd1c6375.js> </script> </body> </html>

     3、nginx配置如下:

 server {
        listen       8000;
        server_name  localhost;
        root D:/nginx/nginx-1.13.12/html;
        location ^~/1/{
           try_files $uri  index1.html  /index1.html;
        }
        location ^~/2/{
            try_files $uri  index2.html  /index2.html;
        }

        location ^~/api/{
            proxy_pass http://10.15.4.113:9000/;
        }
}

html文件夹里面结构:

│  index1.html
│  index2.html
│  tree.txt
│  
├─1
│  ├─xxx
│       
└─2
  |─xxx // 这儿是app2的文件 

  

 

以上是关于nginx 单个端口布置多个单页应用的主要内容,如果未能解决你的问题,请参考以下文章

Nginx配置单页应用

Linux系统中安装Nginx进行单个端口代理和Nginx多个端口代理的配置

Linux系统中安装Nginx进行单个端口代理和Nginx多个端口代理的配置

nginx 反向代理说明

从单个按钮从多个片段中提取数据

是否有在单个活动中处理多个片段的 Android 设计模式?