当然可以在同一份nginx.conf里新增多个server块！Nginx天生就支持多虚拟主机配置，每个server块对应一个独立的站点/应用，完全能搞定你新增两个Vuetify UI应用的需求。下面给你一步步讲清楚怎么操作，还有要注意的细节：

第一步：准备Vuetify应用的静态文件 #

1. 先在本地把你的Vuetify项目打包成静态资源：执行npm run build，项目根目录会生成dist文件夹，这就是部署需要的所有文件。
2. 把两个Vuetify应用的dist文件夹分别上传到AWS Linux实例的指定目录，比如：
   • 第一个Vuetify应用放在/var/www/vuetify-admin
   • 第二个Vuetify应用放在/var/www/vuetify-portal
3. 给Nginx赋予目录访问权限，避免403错误：

   sudo chown -R nginx:nginx /var/www/vuetify-admin
   sudo chown -R nginx:nginx /var/www/vuetify-portal
   

第二步：修改nginx.conf新增server块 #

打开你的配置文件：sudo nano /etc/nginx/nginx.conf，在现有server块的**外面（http块内部）**新增两个独立的server块即可。这里分两种常见场景给你示例：

场景1：用端口区分不同应用（适合无域名的测试场景）

比如让第一个Vuetify应用监听8081端口，第二个监听8082端口：

# 第一个新增的Vuetify应用配置
server {
    listen 8081;
    server_name localhost;

    # 指定静态文件根目录
    root /var/www/vuetify-admin/dist;
    index index.html;

    # 关键：处理SPA前端路由，避免刷新页面404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：给静态资源设置缓存，提升加载速度
    location ~* \.(js|css|png|jpg|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

# 第二个新增的Vuetify应用配置
server {
    listen 8082;
    server_name localhost;

    root /var/www/vuetify-portal/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存配置同上
    location ~* \.(js|css|png|jpg|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

场景2：用域名区分不同应用（适合生产环境）

如果你有对应域名（比如admin.yourdomain.com和portal.yourdomain.com），可以让两个应用都监听80端口，靠server_name区分：

# 第一个Vuetify应用（管理后台）
server {
    listen 80;
    server_name admin.yourdomain.com;

    root /var/www/vuetify-admin/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存配置
    location ~* \.(js|css|png|jpg|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

# 第二个Vuetify应用（普通门户）
server {
    listen 80;
    server_name portal.yourdomain.com;

    root /var/www/vuetify-portal/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存配置
    location ~* \.(js|css|png|jpg|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

第三步：验证配置并重启Nginx #

1. 先检查配置文件有没有语法错误：

   sudo nginx -t
   

   如果输出nginx: configuration file /etc/nginx/nginx.conf test is successful就没问题。
2. 重启Nginx让配置生效：

   sudo systemctl restart nginx
   

第四步：AWS安全组配置（必做） #

• 如果是用端口区分：要在AWS实例的安全组里开放8081、8082端口，允许HTTP流量（0.0.0.0/0或者指定IP段）进入。
• 如果是用域名区分：确保安全组开放80端口，同时把域名解析指向你的AWS实例公网IP。

额外注意事项 #

• 路由问题：Vuetify是SPA应用，一定要配置try_files $uri $uri/ /index.html;，否则用户刷新页面会出现404错误——因为SPA的路由是前端逻辑，Nginx默认会去寻找对应物理文件，找不到就返回404，这个配置会让Nginx找不到文件时返回index.html，交给前端路由处理。
• 端口冲突：新增的server块监听端口不能和现有应用重复（比如你现有Node API如果用了3000，就别再用3000）。
• API代理：如果Vuetify应用需要调用你现有的NodeJs Rest API，可以在对应server块里加反向代理配置，比如：

  location /api {
      proxy_pass http://localhost:3000; # 假设你的Node API运行在3000端口
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
  }
  

内容的提问来源于stack exchange，提问作者margherita pizza