一个域名多个vue项目

同域名不同项目

在同一个域名下根据不同路径设置不同项目，主要是配置nginx，并与vue项目的路由模式有关。

一、一个域名多个项目

项目一：https://域名/apple
项目二：https://域名/banana

1.首先设置vue项目打包配置

1. 路由中配置base，例如“base: /apple/”
2. 在vue.config.js文件中配置publicPath，例如 ”publicPath: /apple/“

2.上传文件到服务器

3.配置nginx

重点是try_files，刷新出现404就是try_files配置有问题。

    location /apple {
      # root /www/wwwroot/域名/apple;
      alias /www/wwwroot/域名/apple;
      try_files $uri $uri/ /apple/index.html;
      index index.html;
    }
    location /banana {
      # root /www/wwwroot/域名/apple;
      alias /www/wwwroot/域名/banana;
      try_files $uri $uri/ /banana/index.html;
      index index.html;
    }

4.效果

二、域名指向其他域名下的项目

例如有两个域名A、B，在A域名下有history、hash、apple、banana四个项目，通过B域名访问A域名下的项目。
history、hash 项目未配置 base 和 publicPath。
apple、banana 项目已配置 base 和 publicPath。

四种方法：

1.B域名直接加项目后面的的地址

history项目在A中地址：https://A/history | https://A/history/style
使用B域名访问的地址为：https://B | https://B/style

这个不需要配置路由文件的base和配置文件中的publicPath。

优点：B直接访问history项目，不需要在B域名后面加项目名
缺点：A/history无法访问查看页面效果。

A的nginx配置:

    location /history {
      alias /www/wwwroot/A/history;
      try_files $uri $uri/ /history/index.html;
      index index.html;
      # root /www/wwwroot/A;
      # try_files $uri $uri/ /history/index.html;
      # index /history/index.html;
    }
    location /hash {
      alias /www/wwwroot/A/hash;
      try_files $uri $uri/ /hash/index.html;
      index index.html;
    }

B的nginx配置:

    location ^~ / {
      proxy_pass https://A/history/;
    }

2.B域名只能代理A域名指定项目

apple 项目在A中地址：https://A/apple | https://A/apple/style
使用B域名访问的地址为：https://B/apple | https://B/apple/style

这个 需要 配置路由文件的base和配置文件中的publicPath。

优点：可以控制哪些项目可以访问，可以使用A，B两个域名访问
缺点：需要配置`base`和`publicPath`

A的nginx配置:

    location /apple{
      alias /www/wwwroot/A/apple;
      try_files $uri $uri/ /apple/index.html;
      index index.html;
      # root /www/wwwroot/A;
      # try_files $uri $uri/ /apple/index.html;
      # index /apple/index.html;
    }
    location /banana {
      alias /www/wwwroot/A/banana ;
      try_files $uri $uri/ /banana/index.html;
      index index.html;
    }

B的nginx配置:

    # 只代理apple项目
    location ^~ /apple {
      proxy_pass https://A/apple/;
    }

3.B域名只能代理A域名指定项目

apple 项目在A中地址：https://A/apple | https://A/apple/style
使用B域名访问的地址为：https://B（https://B/apple） | https://B/style（https://B/apple/style）

这个 需要 配置路由文件的base和配置文件中的publicPath。

优点：可以控制哪些项目可以访问，可以使用A，B两个域名访问
缺点：需要配置`base`和`publicPath`

A的nginx配置:

    location /apple{
      alias /www/wwwroot/A/apple;
      try_files $uri $uri/ /apple/index.html;
      index index.html;
      # root /www/wwwroot/A;
      # try_files $uri $uri/ /apple/index.html;
      # index /apple/index.html;
    }
    location /banana {
      alias /www/wwwroot/A/banana ;
      try_files $uri $uri/ /banana/index.html;
      index index.html;
    }

B的nginx配置:

    location ^~ / {
      rewrite ^/(.*)$ /apple/$1 break;
      proxy_pass https://car.lichee.top;
    }
    location ^~ /apple {
      proxy_pass https://car.lichee.top;
    }

4.B域名代理全部A域名的项目

项目在A域名中的地址：https://A/apple | https://A/banana
使用B域名访问的地址：https://B/apple | https://B/banana

这个 需要 配置路由文件的base和配置文件中的publicPath。

优点：在A，B两个域名都可以访问，相当于复制了A域名下所有项目
缺点：需要配置`base`和`publicPath`

    location /apple {
      # root /www/wwwroot/A/apple;
      alias /www/wwwroot/A/apple;
      try_files $uri $uri/ /apple/index.html;
      index index.html;
    }
    location /banana {
      # root /www/wwwroot/A/banana;
      alias /www/wwwroot/A/banana;
      try_files $uri $uri/ /banana/index.html;
      index index.html;
    }

B的nginx配置:

    location ^~ /{
      proxy_pass https://A/;
    }

综上，一个域名多个项目或者由其他项目进行代理转发主要就是与nginx的配置有关。