Nginx同端口部署多个Vue及Uni-app项目实战指南
在实际的开发与运维场景中，我们经常需要将多个前端项目（例如后台管理系统、用户端H5、Uni-app打包的移动端等）部署在同一台服务器的同一个端口下。这种需求通常通过Nginx的location指令配合前端路由的base路径来实现。本文将详细讲解如何从零开始配置前端项目与Nginx，实现多项目同端口平滑部署。
一、核心思路
同端口部署多项目的核心在于路径区分。假设我们的域名是www.ipipp.com，我们可以通过不同的路径来访问不同的项目：
www.ipipp.com/admin/访问 Vue 后台管理项目www.ipipp.com/mobile/访问 Uni-app 移动端项目
为了实现这一点，前端在打包时需要修改公共路径（publicPath），Nginx在配置时需要使用alias将虚拟路径映射到服务器真实的物理目录。
二、前端项目打包配置
在部署前，必须确保前端项目打包后的静态资源路径是正确的，否则会出现js、css等文件404错误。
1. Vue项目配置 (以Vue CLI为例)
假设我们要将Vue项目部署在/admin/路径下，需要在vue.config.js中修改publicPath：
module.exports = {
publicPath: '/admin/',
outputDir: 'dist',
// 其他配置...
}如果你使用的是 Vite，则需要在vite.config.js中配置base：
export default defineConfig({
base: '/admin/',
build: {
outDir: 'dist'
}
})2. Uni-app项目配置
Uni-app项目若打包为H5并部署在/mobile/路径下，需要在manifest.json中进行配置。找到H5相关配置，修改运行的基础路径：
{
"h5": {
"publicPath": "/mobile/",
"router": {
"base": "/mobile/"
}
}
}配置完成后，分别将Vue项目和Uni-app项目打包，并将打包后的文件上传至服务器。例如分别存放在/usr/share/nginx/html/admin和/usr/share/nginx/html/mobile目录下。
三、Nginx配置详解
Nginx配置是关键环节。这里我们需要使用alias而不是root，因为root会将location路径拼接到真实路径后面，而alias是路径替换，更符合我们的需求。
同时，为了支持前端History路由模式，必须配置try_files，将所有未匹配的请求重定向到对应的index.html。
server {
listen 80;
server_name www.ipipp.com;
# Vue后台管理项目
location /admin {
alias /usr/share/nginx/html/admin;
index index.html;
try_files $uri $uri/ /admin/index.html;
}
# Uni-app移动端项目
location /mobile {
alias /usr/share/nginx/html/mobile;
index index.html;
try_files $uri $uri/ /mobile/index.html;
}
# 根路径配置（可选，默认跳转或提示）
location / {
root /usr/share/nginx/html;
index index.html;
}
}四、配置要点与常见问题排查
1. root 与 alias 的区别
在上述配置中，如果使用root /usr/share/nginx/html/admin;，当请求/admin/js/app.js时，Nginx会在服务器上寻找/usr/share/nginx/html/admin/admin/js/app.js，这显然是不存在的。使用alias则会在服务器上寻找/usr/share/nginx/html/admin/js/app.js，这正是我们需要的。
2. try_files 的 fallback 路径
注意try_files $uri $uri/ /admin/index.html;中的最后一个参数。当Nginx在磁盘上找不到对应文件时，会内部重定向到/admin/index.html。这个路径必须是相对于Nginx根路径的绝对路径，而不是文件系统路径，否则前端路由刷新时会出现404。
3. 静态资源404问题
如果部署后页面空白或控制台报js/css文件404，百分之九十的原因是前端打包时的publicPath或base与Nginx的location路径不一致。请务必确保前端打包配置的路径与Nginx监听的路径完全对应。
4. 接口请求代理
多项目部署时，不同项目可能请求不同的后端API。可以在同一个Server块下增加API的代理配置：
# 代理Vue项目后端接口
location /api/admin/ {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# 代理Uni-app项目后端接口
location /api/mobile/ {
proxy_pass http://127.0.0.1:8081/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}按照以上步骤进行前端打包配置与Nginx反向代理配置，即可稳定实现Nginx同端口下多Vue及Uni-app项目的独立运行与平滑切换。配置修改完成后，记得执行nginx -s reload重载配置使其生效。