首页 > 网站技巧 > 服务器 > nginx > Nginx同端口部署多个vue及unapp项目

Nginx同端口部署多个vue以及unapp项目

2026-01-12 08:55:55 作者：棉花糖先生

文章详细介绍了如何在同一端口下部署PC端和App端项目,包括Nginx配置、前端打包配置、manifest.json配置以及针对Vue3+vite项目的特殊配置,通过示例项目A和项目B,展示了如何修改Vite配置文件、调整路由配置,并通过Nginx进行关键配置

问题描述

同一个端口部署pc和app端项目，Nginx配置，前端打包配置

解决方案

配置pc端vue项目打包配置

配置uniapp项目打包配置，manifest.json文件添加配置

  "h5": {
    "router": {
      "mode": "hash",
      "base": "./"//改为 /app/
    },
    // pubilcPath的路径要和H5配置中的运行基础路径一致
    "publicPath": "./", //改为 /app/
    "devServer": {
      "disableHostCheck": true,
      //禁止访问本地host文件
      "port": 8088,
      "https": false
    },
    "sdkConfigs": {
      "maps": {
        "qqmap": {
          "key": ""
        }
      }
    },
    "title": "XXXXXXX",
    "optimization": {
      "treeShaking": {
        "enable": true
      }
    }
  }

Nginx config配置

   server {
        listen       3114 default_server;
	listen       [::]:3114 default_server;       
	server_name  _;

	root /mnt/menghai_ds;

        location /pc/ {
	    alias /mnt/menghai_ds/pc/;
            index  index.html index.htm;
		}

        location /app/{
            alias /mnt/menghai_ds/app/;
            index  index.html index.htm;
        }
    }

vue3 + vite

项目配置（以项目A和项目B为例）

修改Vite配置文件（vite.config.js）

// 项目A配置（访问路径：/projectA）
export default defineConfig({
base: ‘/projectA/', // 关键配置：资源基础路径
plugins: [vue()],
// 其他配置…
})

// 项目B配置（访问路径：/projectB）
export default defineConfig({
base: ‘/projectB/',
plugins: [vue()],
// 其他配置…
})

2. 调整路由配置（router.js）

// 两个项目均需修改路由历史模式
import { createRouter, createWebHistory } from ‘vue-router'

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), // 自动匹配base配置
routes: [
// 路由定义…
]
})

Nginx配置（关键步骤）

nginx
server {
listen 80;
server_name your-domain.com;

主项目配置（假设项目A为主项目）

location / {
root /var/www/projectA/dist;
index index.html;
try_files $uri $uri/ /projectA/index.html; # 路由回退配置
}

子项目配置（项目B）

location /projectB {
alias /var/www/projectB/dist; # 注意使用alias而非root
index index.html;
try_files $uri $uri/ /projectB/index.html;
}

可继续添加更多项目…

location /projectC { … }

}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。