一、首先服务器配置安全组规则处配置开放的端口（不配置对应端口不可以访问）

1.进入服务器实例详情

2.找到配置安全组规则（如下图）

3.点击配置规则

4.配置对应开放端口

二、找到nginx安装目录下的nginx.conf

1. 配置多端口访问

server {
    listen       80;//此处为端口号
    server_name  localhost;
    location / {
        root   /nginx-1.21.0/html/web;//项目路径
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
server {
    listen       81;//此处为端口号
    server_name  localhost;
    location / {
        root   /nginx-1.21.0/admin;//项目路径
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

2.配置二级代理

1、首先进入项目router 下面 路由配置
const createRouter = () => new Router({
  mode: 'history', // require service support
  base: 'admin',//添加此处
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

2、打开vue.config 修改pubilcPath
 publicPath: '/admin',//修改此处，此处和二级代理名称一致
 
3、修改nginx.conf

server {
        listen       80;
        server_name  localhost;

        //二级代理配置
       location /admin {
            root   /Software/nginx-1.21.0/html;
            try_files $uri $uri/ /admin/index.html;
        }


        location / {
            root  /nginx-1.21.0/html/web;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
       


        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }