使用 nginx 同域名下部署多個 vue 項目

 使用 nginx 同域名下部署多個 vue(iview-admin) 項目， 主要是實現公網IP不足的情況

參考地址：https://segmentfault.com/a/1190000018319774

項目配置

修改vue.config.js中的文件

baseUrl

修改router文件夾下的index.js

 

npm run build

nginx 配置

nginx文件結構

├─conf
│  ├─... # 其他文件
│  └─nginx.conf
│
├─html # 只看這里，其他暫時我沒用到
│  ├─Enterprise
│  │  └─static
│  │      ├─css
│  │      ├─fonts
│  │      └─js
│  │          ├─g
│  │          └─V
│  ├─Utility
│  │   └─static
│  │       ├─css
│  │       ├─fonts
│  │       └─js
│  │           ├─g
│  │           └─V
│  ├─index.html
│  └─50x.html
└─... # 其他文件

　　

 

在nginx的html文件夾中新建自己的項目文件夾

項目中修改的項目名稱保持一致

將打包好的dist文件中的內容放進去

修改conf文件夾中的nginx.conf文件

添加sever

server {
        listen       9000;
        server_name  192.168.199.171;
    charset utf-8;
 
        proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder-For $remote_addr;
 
        root html; # 這里指定剛剛我們的文件夾
         
        # 總的項目路由，我偷懶直接寫在了同一個文件
        # 如果有很多可以在配置多個 conf 文件，使用 include 關聯進來
        location / {
            try_files $uri $uri/ /index.html; # 這里可以理解指定到 html 文件夾下的 index.html
        }
         
        # Utility
        # 這里就是剛剛我們在 vue 項目中 vue.config.js 的配置 BASE_URL，
        # 也是 vue 項目中配置的 router 中的 base
        location ^~ /Utility {
            try_files $uri $uri/ /Utility/index.html;# 這里可以理解指定到 html 文件夾下 project1 文件夾 的 index.html
        }
        # Enterprise
        # 這里是項目二的配置
        location ^~ /Enterprise {
            try_files $uri $uri/ /Enterprise/index.html;# 這里可以理解指定到 html 文件夾下 project1 文件夾 的 index.html
        }
         
}