使用 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
        }
         
}