nginx部署同一個域名多個vue項目配置

首先准備兩個vue項目 端口 例如：8080  8087 

第一個正常打包即可 訪問時只需要輸入域名  

www.xxx.com;

第二個項目訪問路徑為www.xxx.com/bi;

在第二個項目找到配置文件修改自己的虛擬訪問路徑

ps:

baseUrl

從 Vue CLI 3.3 起已棄用，請使用publicPath。

增加請求前綴

 

 

然后修改路由

router/index.js

 

 當打包好了之后修改index.html

加入

 

 <meta base=/bi/>

默認打包生成dist然后將其目錄下所有的文件上傳到你的應用服務器上

不需要dist，在服務器先新建一個 bi （就是你的前綴文件夾）然后將這些文件上傳到里面去

打包上傳到Linux 路徑后

nginx.conf配置

server {
        listen       80;
        server_name  www.xxx.com;
        index index.html index.htm;
        #第一個vue項目
        location / {
                root   /usr/local/server/war/portal;
                index  index.html index.htm;
        }
        #第二個vue項目
        location /bi {
               alias   /usr/local/server/war/bi/;#注意這里
               index  index.html index.htm;
               try_files $uri $uri/ /bi/index.html; #解決頁面刷新404問題
        }
        #后端項目 請求轉發至8090端口
        location /prod-api {
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://您的ip地址:8090/prod-api;
        }

        
         
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

 

root與alias區別

最基本的區別：alias指定的目錄是准確的，root是指定目錄的上級目錄，並且該上級目錄要含有location指定名稱的同名目錄。另外，根據前文所述，使用alias標簽的目錄塊中不能使用rewrite的break。

(1) . alias虛擬目錄配置中，location匹配的path目錄如果后面不帶"/"，那么訪問的url地址中這個path目錄后面加不加"/"不影響訪問，訪問時它會自動加上"/"；
    但是如果location匹配的path目錄后面加上"/"，那么訪問的url地址中這個path目錄必須要加上"/"，訪問時它不會自動加上"/"。如果不加上"/"，訪問就會失敗！
(2) . root目錄配置中，location匹配的path目錄后面帶不帶"/"，都不會影響訪問。

所以，一般情況下，在nginx配置中的良好習慣是：
1）在location /中配置root目錄；
2）在location /path中配置alias虛擬目錄。

我在配置的時候 加上了 "/"那么在訪問的時候 必須后面加上"/"

最終兩個項目訪問時地址為 www.xxx.com    www.xxx.com/admin/

 

 

然后保存 重啟nginx

進入到nginx安裝目錄下的

bin/文件下 輸入命令 ./nginx -t 檢查配置文件 語法是否正確

然后 重新加載配置文件 ./nginx -s reload

即可