目录

前言
一、项目背景与部署目标
二、前端项目打包前准备
2.1 修改 base 配置
2.2 修改接口代理
2.3 完整 vite.config.js 配置
（1）base：决定项目最终部署路径
（2）proxy：解决开发环境跨域问题
（3）resolve.alias：统一路径引用
（4）build：优化打包输出
2.4 打包项目
三、Windows Server（IIS）+ Nginx 配置
3.1 前端页面配置
3.2 后端接口代理
3.3 完整 nginx.conf
四、重启常见问题
五、本文总结

前言

随着前后端分离架构的普及，越来越多的 Vue 项目采用 Vite 作为构建工具，而生产环境通常会部署到 Nginx。在实际项目中，如果一个域名需要部署多个独立的 Vue 应用，就会涉及二级目录部署的问题。

最近公司新增了一个 IPAgent 项目，技术栈采用 Vue3 + Vite + Spring Boot。由于服务器已经部署了多个业务系统，不希望新增域名，因此要求将项目部署到已有门户下，通过：

https://itsgpt.njust.edu.cn/IPAgent/

进行访问。

其中：

  • 前端部署到 IIS 服务器的 Nginx 静态目录；

  • 后端 Spring Boot 服务运行在 localhost:8999；

  • 前端所有接口统一通过 /IPAgent-api 转发到本地服务；

  • 保证本地开发环境无需修改代码，生产环境也能够正常访问。

整个部署过程中涉及 Vite 打包配置、Nginx 二级目录配置、History 路由支持、接口代理以及 Nginx 重启 等内容。本文结合实际项目，完整记录整个部署过程，希望能够帮助有相同需求的开发者少走一些弯路。

Vue3 + IIS + Nginx + Spring Boot 部署架构图

浏览器
     │
     ▼
itsgpt.njust.edu.cn
     │
     ▼
     IIS
     │
     ▼
   Nginx
 ┌────┴────┐
 ▼         ▼
Vue项目   SpringBoot

一、项目背景与部署目标

公司原有门户已经运行多个 Vue 项目，例如大模型、教育智能体（/teach）系统等，部署在24的IIS 服务器。现在新增一个 IPAgent 项目，希望继续使用同一个域名进行统一管理，而不是再申请新的域名。

最终部署后的访问方式如下：

项目 访问地址
门户首页 its智慧交通大模型
teach 项目 发明创造与知识产权大模型智能体系统
IPAgent 项目 知识产权多智能体矩阵系统

其中，IPAgent 的后端服务部署在服务器本机：

http://localhost:8999

浏览器不能直接访问本地端口，因此需要通过 Nginx 反向代理，将浏览器请求统一转发到 Spring Boot 服务。

整个部署目标可以总结为以下几点：

  • 本地开发环境继续使用 http://localhost:5173/；

  • 生产环境访问 https://itsgpt.njust.edu.cn/IPAgent/；

  • Vue Router 使用 History 模式，不出现刷新 404；

  • 前端接口统一通过 /IPAgent-api 访问；

  • Nginx 代理到 http://localhost:8999；

  • 不影响服务器上其它已有项目。

这里的Nginx 代理到 http://localhost:8999；访问的是 IIS 服务器上的 IP:8999 服务。

IIS（Internet Information Services） 是微软提供的 Windows Web 服务器，用于发布和管理网站、Web API、FTP 等网络服务。它与 Windows 深度集成，支持 ASP.NET、ASP.NET Core、PHP、静态网站 等多种应用，并提供应用程序池、HTTPS 证书管理、身份验证、日志记录和安全控制等功能。

在实际项目中，IIS 常作为网站的运行平台，也可以与 Nginx 配合使用，由 Nginx 负责反向代理和静态资源处理，IIS 或其他后端服务负责业务逻辑处理，从而提升系统的性能、稳定性和安全性。

二、前端项目打包前准备

在部署之前，需要先调整 Vite 配置，否则即使项目能够正常打包，上线后也会出现静态资源加载失败、页面空白等问题。

2.1 修改 base 配置

Vite 默认认为项目部署在网站根目录，因此 base 默认为 /。

而本项目部署路径为：

https://itsgpt.njust.edu.cn/IPAgent/

因此需要根据环境动态配置：

开发环境：

http://localhost:5173/

生产环境：

https://itsgpt.njust.edu.cn/IPAgent/

推荐写法如下：

base: mode === 'production' ? '/IPAgent/' : '/',

这样既不会影响本地开发，也能够保证生产环境静态资源加载正常。

2.2 修改接口代理

开发环境通过 Vite Proxy 将接口转发到本地开发服务器：

浏览器
    │
    ▼
localhost:5173
    │
    ▼
Vite Proxy
    │
    ▼
192.168.110.118:8080

生产环境则由 Nginx 统一代理：

浏览器
    │
    ▼
itsgpt.njust.edu.cn
    │
    ▼
Nginx
    │
    ▼
localhost:8999

因此，建议统一将接口前缀改为：

/IPAgent-api

这样开发环境和生产环境只需要修改代理配置即可，业务代码无需调整。

开发环境与生产环境请求流程对比图

2.3 完整 vite.config.js 配置

完成上述准备工作后，需要对 vite.config.js 进行统一配置，使项目既能够在本地正常开发，也能够部署到 IIS + Nginx 环境下的 /IPAgent 二级目录。

这里采用开发环境与生产环境动态切换的方式：开发环境保持默认访问地址 http://localhost:5173/，生产环境自动切换到 /IPAgent/，避免本地调试和生产部署相互影响。同时，通过 Vite 的 proxy 功能代理后端接口，开发阶段无需处理跨域问题，生产环境则交由 Nginx 完成接口转发。

完整配置如下（可直接使用）：

// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    // 生产环境部署到 /IPAgent，开发环境保持根目录
    base: mode === 'production' ? '/IPAgent/' : '/',

    plugins: [vue()],

    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },

    server: {
      host: '0.0.0.0',
      port: 5173,
      open: true,

      proxy: {

        // 本地接口代理
        '/IPAgent-api': {
          target: env.VITE_APP_LOCAL_URL || 'http://192.168.110.118:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/IPAgent-api/, '')
        },

        // 工作流接口
        '/workflow': {
          target: env.VITE_APP_WORKFLOW_URL || 'http://192.168.110.125:8010',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/workflow/, '')
        },

        // 合同审查接口
        '/contract-review': {
          target: env.VITE_APP_CONTRACT_REVIEW_URL || 'http://124.223.33.221:18004',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/contract-review/, '')
        }

      }
    },

    build: {
      outDir: 'dist',
      sourcemap: false,

      rollupOptions: {
        output: {
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js',
          assetFileNames: '[ext]/[name]-[hash].[ext]'
        }
      }
    }

  }
})

虽然整个配置文件内容并不多，但真正影响部署成功的主要有以下几个配置项。

（1）base：决定项目最终部署路径

对于 Vite 项目来说，base 是部署过程中最关键的一项配置，它决定了静态资源的访问前缀。

本项目部署地址为：

https://itsgpt.njust.edu.cn/IPAgent/

因此生产环境必须配置：

base: mode === 'production' ? '/IPAgent/' : '/'

这里使用了 mode 进行环境判断：

  • 开发环境（npm run dev）使用 /，本地访问地址仍然是 http://localhost:5173/。

  • 生产环境（npm run build）自动切换为 /IPAgent/，打包后的静态资源路径会自动带上项目目录。

如果直接写成：

base: '/IPAgent/'

那么本地启动项目时，浏览器访问 http://localhost:5173/ 会提示：

The server is configured with a public base URL of /IPAgent/

必须访问：

http://localhost:5173/IPAgent/

这显然不符合开发习惯。因此推荐采用动态配置的方式，兼顾开发和生产环境。

（2）proxy：解决开发环境跨域问题

开发环境中，前端运行在：

http://localhost:5173

而后端接口运行在：

http://192.168.110.118:8080

由于端口不同，浏览器会产生跨域问题。

因此，本地利用 Vite 内置的代理功能，将所有 /IPAgent-api 请求自动转发到后端服务：

'/IPAgent-api': {
    target: env.VITE_APP_LOCAL_URL,
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/IPAgent-api/, '')
}

例如浏览器请求：

/IPAgent-api/chat/chatHistory

Vite 实际转发为：

http://192.168.110.118:8080/chat/chatHistory

这样既避免了跨域问题，又保持了前后端请求路径一致。

需要注意的是，该代理仅在开发环境生效，生产环境将由 Nginx 完成同样的转发，因此前端业务代码无需修改。

（3）resolve.alias：统一路径引用

项目中统一使用：

import xxx from '@/components/xxx'

而不是：

import xxx from '../../../components/xxx'

通过配置：

alias: {
    '@': resolve(__dirname, 'src')
}

即可将 @ 映射到 src 目录，提高代码的可读性和维护性。

（4）build：优化打包输出

打包配置主要用于控制生成文件的目录结构：

build: {
    outDir: 'dist',
    sourcemap: false
}

其中：

  • outDir：指定打包输出目录；

  • sourcemap: false：关闭 Source Map，减少生产环境文件体积，同时避免暴露源码。

此外，通过 rollupOptions.output 将 JavaScript、CSS、图片等静态资源统一分类输出，使打包后的目录结构更加清晰，便于部署和后续维护。

完成以上配置后，即可执行：

npm run build

项目会在根目录生成 dist 文件夹。接下来，只需将 dist 中的所有文件复制到 C:\inetpub\nginx-1.23.1\html\IPAgent，然后配置 Nginx，即可完成生产环境部署。这样写比直接贴代码更有技术博客的阅读体验，也能让读者理解每个关键配置在整个部署流程中的作用。

2.4 打包项目

完成配置后，执行：

npm run build

打包成功后会生成 dist 目录，将其中所有文件复制到：

C:\inetpub\nginx-1.23.1\html\IPAgent

三、Windows Server（IIS）+ Nginx 配置

前端项目打包完成后，将生成的 dist 文件全部复制到 Nginx 的静态资源目录：

C:\inetpub\nginx-1.23.1\html\IPAgent

Windows Server IIS服务器，部署完成后的目录结构如下：

C:\inetpub\nginx-1.23.1
│
├── conf
│   └── nginx.conf
│
├── html
│   ├── ivo
│   ├── teach_agent
│   └── IPAgent
│       ├── index.html
│       ├── assets
│       └── ...
│
└── nginx.exe

其中，IPAgent 目录就是打包后的 Vue 项目。

由于该项目部署在二级目录 /IPAgent 下，因此需要在 Nginx 中新增两个代理：

  • /IPAgent/：负责访问前端页面；

  • /IPAgent-api/：负责代理后端接口。

整个请求

流程如下：

浏览器
      │
      ▼
https://itsgpt.njust.edu.cn/IPAgent/
      │
      ▼
      IIS
      │
      ▼
    Nginx
 ┌────┴───────────────┐
 ▼                    ▼
html/IPAgent      localhost:8999
(Vue页面)          Spring Boot

Nginx 请求转发流程图

浏览器
     │
     ▼
https://itsgpt.njust.edu.cn/IPAgent/
     │
     ▼
   Nginx
┌────┴──────────────┐
▼                   ▼
html/IPAgent    localhost:8999

3.1 前端页面配置

由于项目采用 Vue Router 的 History 模式，因此除了指定静态资源目录外，还需要配置 try_files。

这里使用 alias 而不是 root，可以避免路径重复拼接的问题。

location /IPAgent/ {

    alias html/IPAgent/;

    index index.html index.htm;

    # 支持 Vue Router History 模式
    try_files $uri $uri/ /IPAgent/index.html;
}

其中：

  • alias：指定项目真实目录；

  • try_files：解决刷新页面出现 404 的问题。

如果项目采用 History 模式，这一行配置必不可少。

3.2 后端接口代理

项目后端运行在：

http://localhost:8999

为了避免跨域，同时统一接口访问路径，需要新增接口代理：

location ^~ /IPAgent-api/ {

    proxy_pass http://localhost:8999/;

    proxy_http_version 1.1;

    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_set_header Connection "";

    proxy_buffering off;
}

需要注意的是，proxy_pass 后面保留了 /：

proxy_pass http://localhost:8999/;

这样浏览器请求：

/IPAgent-api/chat/chatHistory

最终会转发为：

http://localhost:8999/chat/chatHistory

如果去掉最后的 /，请求路径可能会携带 /IPAgent-api 前缀，从而导致 Spring Boot 无法匹配接口。

3.3 完整 nginx.conf

下面提供本文实际使用的 nginx.conf 配置文件，仅保留基础配置以及 itsgpt.njust.edu.cn 的 server 配置，可直接用于部署。

worker_processes 1;

events {
    worker_connections 1024;
}

http {

    include       mime.types;
    default_type  application/octet-stream;

    sendfile on;
    keepalive_timeout 65;

    server {

        listen 8082;
        server_name itsgpt.njust.edu.cn;

        # 默认首页
        location / {
            root html/ivo;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # teach 项目
        location /teach {
            alias html/teach_agent;
            index index.html index.htm;
            try_files $uri $uri/ /teach/index.html;
        }

        # IPAgent 前端
        location /IPAgent {
            alias html/IPAgent;
            index index.html index.htm;
            try_files $uri $uri/ /IPAgent/index.html;
        }

        # IPAgent 后端接口
        location ^~ /IPAgent-api/ {

            proxy_pass http://localhost:8999/;

            proxy_http_version 1.1;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_set_header Connection "";

            proxy_buffering off;
        }

        # AI 对话接口
        location /api/streamChatWithWeb {

            proxy_pass http://localhost:3007/api/chatStream;

            proxy_buffering off;
        }

        # AI 流式接口
        location /api/streamChatWithWeb2 {

            proxy_pass https://njustllmz.metadotai.com/api/openapi/v1/chat/completions3;

            proxy_set_header Authorization "Bearer xxxxxxxxxxxxxxxxxxxxx";

            proxy_set_header Cookie "";

            proxy_buffering off;
        }

        # 原有 API
        location ^~ /api/ {
            proxy_pass http://localhost:9014/;
        }

        error_page 500 502 503 504 /50x.html;

        location = /50x.html {
            root html;
        }

        proxy_buffering off;
    }
}

完成上述配置后，保存 nginx.conf 文件，即可进入最后一步：重新加载或重启 Nginx，使新的配置生效。

四、重启常见问题

Nginx 重启与常见问题：修改完 nginx.conf 后，新的配置并不会立即生效，需要重新加载或重启 Nginx。

建议先检查配置文件是否存在语法错误：

nginx -t

如果返回：

syntax is ok
test is successful

说明配置没有问题。

随后可以查看当前 Nginx 是否正在运行：

tasklist | findstr nginx

如果需要重新启动，可以先结束已有进程：

taskkill /f /im nginx.exe

然后进入 Nginx 安装目录：

C:\inetpub\nginx-1.23.1

双击或执行：

nginx.exe

重新启动 Nginx，新的配置即可生效。

其它常见问题：

host not found in upstream

部署过程中，还可能遇到如下错误：

nginx: [emerg] host not found in upstream "njustllmz.metadotai.com"

出现该问题通常不是新增的 IPAgent 配置导致的，而是 proxy_pass 中配置的域名无法解析。常见原因包括服务器 DNS 配置异常、网络不可达或目标域名暂时无法访问。

可以先检查服务器网络连接和 DNS 配置，确认域名能够正常解析后，再重新执行 nginx -t 和启动 Nginx。

五、本文总结

本文结合实际项目，介绍了 Vue3 + Vite 项目部署到 Windows Server（IIS）+ Nginx 环境的完整过程，实现了将项目部署到二级目录 /IPAgent，并通过 /IPAgent-api 将接口统一代理到本地 Spring Boot 服务。

整个部署流程可以概括为四个步骤：

首先，修改 vite.config.js，根据环境动态设置 base 并配置开发代理；

其次，执行 npm run build 打包项目，将生成的 dist 文件复制到 C:\inetpub\nginx-1.23.1\html\IPAgent；

然后，在 nginx.conf 中新增 /IPAgent 和 /IPAgent-api 两个 location 配置，实现前端静态资源访问和后端接口代理；

最后，通过 nginx -t 检查配置，必要时使用 taskkill /f /im nginx.exe 结束旧进程，并重新启动 C:\inetpub\nginx-1.23.1\nginx.exe，使配置正式生效。

整个方案兼顾了本地开发与生产部署，本地仍然使用 http://localhost:5173/ 进行开发，而生产环境则通过 https://itsgpt.njust.edu.cn/IPAgent/ 对外提供服务，无需修改业务代码即可完成环境切换。对于采用 Vue3 + Vite + Nginx 架构的前端项目，这也是一种简单、稳定且易于维护的部署方案。

六、更多操作

更多 Server 实战内容，请看，Server 个人专栏

本文属于 Server 企业级实战系列，持续更新 服务端开发、接口开发、数据库实战、服务器部署、性能调优、高并发解决方案等干货，欢迎关注我的 CSDN 专栏

👉

Server​https://blog.csdn.net/weixin_65793170/category_12128287.html

如果本文对你有帮助，欢迎点赞、收藏、评论，你的支持是我持续输出实战干货的动力！


 

# 前端 # windows # nginx # 运维
Logo
亚马逊云科技技术品牌专区

更多推荐

主动推理-人工海马

2026年07月04日 00:21发言人00:00制造能够思考的机器是人类长久以来的梦想，但这到底意味着什么呢？智能的一个显著特性是能够泛化知识，并灵活地将其应用于新情况。这种泛化确实是现代机器学习的核心问题之一。在这段视频中，我们将探讨如何汲取海马体负责记忆和导航的大脑结构的生物学组织，来构建一个能够学习构建抽象和泛化的计算模型。我们将探索这个模型带给我们关于大脑自身及人工智能领域的启示。发言人

avatar 亚马逊云科技技术品牌专区

Java分布式架构设计方法

服务拆分后，服务间的通信成为关键。事件驱动架构是另一种有效解耦和数据同步的方式，服务通过发布/订阅领域事件进行通信，借助Apache Kafka或RabbitMQ等消息中间件，可以实现事件的可靠传递与异步处理，提升系统整体响应能力。从业务拆分出发，选择恰当的通信与治理模式，妥善处理数据一致性，并构建完善的运维支撑体系。随着云原生理念的深入，Serverless、Service Mesh等新技术也在

avatar 亚马逊云科技技术品牌专区
cover

云计算虚拟化技术全解析：从理论到实践

avatar 亚马逊云科技技术品牌专区