Nginx 部署多个 VUE 项目（相同IP、相同端口、不同上下文路径）

最新推荐文章于 2025-06-17 08:50:24 发布

原创最新推荐文章于 2025-06-17 08:50:24 发布 · 4.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#java #nginx #vue #linux #html

本文介绍了在前后端分离的开发环境中，如何在同一IP相同端口下通过上下文路径区分不同前端项目。主要涉及前端Vue项目的配置，包括修改vue.config.js的publicPath和router的index.js，以及使用Nginx进行代理服务配置，通过location规则和try_files指令解决404问题，实现多个项目在同一服务器不同上下文路径的部署。

文章目录

一、场景描述

在前后分离的项目开发中，前端项目开发人员对 vue 项目的打包一般都是采用默认根目录访问的。如果多个前端项目都采用根目录的方式访问，分别部署在不同的服务器或者同一个服务器的不同端口，那通过 Nginx 代理的方式还很好解决。但是如果必须在同一个 IP 相同端口下，通过访问的上下文路径来区分，那么就是一个比较棘手的问题。

接下来的操作就是带领有以上困惑的开发人员来处理此类问题。

二、解决方案

1、前端项目配置

修改 vue.config.js 配置文件的公共路径配置，修改为我们前端项目服务的名称，这里以 admin 为例
修改 router 目录下的 index.js 文件，指定 Vue 项目的固定路由路径，这里还是以 admin 为例（当然也可以和 publicPath 不相同）
将 Vue 项目打包成静态资源文件
```
npm run build  
```
将打包完成的 dist 文件夹重命名为任意合规的项目文件夹名称，这里以 admin-web 为例
将 admin 文件夹传入到服务器的指定目录中

2、代理服务配置

整体配置文件信息如下

server {
    # 自定义访问端口
    listen       8013;
    # 服务名称
    server_name  localhost;

    # 响应日志文件名称定义
    access_log  logs/admin-web.access.log  main;

    # 设置客户端最大请求体
    client_max_body_size 10m;

    # 设置路由变量转发
    location @router {
        rewrite ^.*$ /index.html last;
    }

    # admin 管理平台前端界面
    location /admin/ {
        # 前端打包后静态文件所在位置，可以和上下文路径不一致，注意 root 和 alias 的用法
        alias   /opt/java/frontend/admin-web/;
        # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
    	try_files $uri $uri/ @router;
        index  index.html index.htm;
    }

    # xxxx 管理平台前端界面
    location /xxxx/ {
        # 前端打包后静态文件所在位置，可以和上下文路径不一致，注意 root 和 alias 的用法
        alias   /opt/java/frontend/xxxx-web/;
        # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
	    try_files $uri $uri/ @router;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;
    error_page  404              /404.html;
    location = /404.html {
	root   html;
    }

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

重启 nginx 服务

# 验证语法
/usr/local/nginx/sbin/./nginx -t

# 重启 Nginx 服务
/usr/local/nginx/sbin/./nginx -s reload

前端访问示例
```
http://127.0.0.1:8013/admin/#
```