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

 更新时间:2026年01月12日 08:55:54   作者:棉花糖先生  
文章详细介绍了如何在同一端口下部署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 { … }

}

总结

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

相关文章

  • 一文搞懂Nginx限流(简单实现)

    一文搞懂Nginx限流(简单实现)

    这篇文章主要介绍了一文搞懂Nginx限流(简单实现),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • nginx实现重写功能和防盗链功能

    nginx实现重写功能和防盗链功能

    这篇文章主要介绍了nginx实现重写功能和防盗链功能,Nginx服务器利用 ngx_http_rewrite_module 模块解析和处理rewrite请求,防盗链基于客户端携带的referer实现,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-06-06
  • nginx禁止dedecms目录php执行权限

    nginx禁止dedecms目录php执行权限

    nginx禁止dedecms目录php执行权限,找到配置fastcgi.conf文件,一般在/usr/local/nginx/conf/下面,修改如下
    2014-01-01
  • Nginx大并发优化实战

    Nginx大并发优化实战

    这篇文章主要介绍了Nginx大并发优化实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 在Nginx中隐藏版本号的方法详解

    在Nginx中隐藏版本号的方法详解

    Nginx是一款高性能的Web服务器软件,它支持反向代理、负载均衡、缓存等功能,在使用 Nginx 的过程中,有时候我们需要隐藏 Nginx 的版本号,以增强服务器的安全性,所以接下来小编将给大家介绍如何在Nginx中隐藏版本号,需要的朋友可以参考下
    2023-11-11
  • 使用 nginx 搭建代理服务器(正向代理 https 网站)的详细步骤

    使用 nginx 搭建代理服务器(正向代理 https 网站)的详细步骤

    这篇文章主要介绍了使用 nginx 搭建代理服务器(正向代理 https 网站)指南的相关操作,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • 在Nginx中配置image filter模块来实现动态生成缩略图

    在Nginx中配置image filter模块来实现动态生成缩略图

    这篇文章主要介绍了在Nginx中配置image filter模块来实现动态生成缩略图的方法,包括缩略图尺寸的设置等方面的介绍,需要的朋友可以参考下
    2015-12-12
  • Nginx实现前后端分离

    Nginx实现前后端分离

    本篇文章是小编整理的关于Nginx实现前后端分离的详细代码,如果你对此有需要,可以参考测试下。
    2018-02-02
  • Nginx主动健康检查的实战指南

    Nginx主动健康检查的实战指南

    在微服务与高并发架构的江湖里,Nginx不仅是流量的守门人,更是系统的免疫系统,今天,我们要彻底打破这种被动局面,深入剖析如何利用主动健康检查,赋予Nginx未卜先知的能力,构建真正坚如磐石的高可用负载均衡层,需要的朋友可以参考下
    2025-12-12
  • Nginx服务器中用于生成缩略图的模块配置教程

    Nginx服务器中用于生成缩略图的模块配置教程

    这篇文章主要介绍了Nginx服务器中用于生成缩略图的模块配置教程,包括实时生成缩略图到硬盘上的方法讲解,需要的朋友可以参考下
    2016-01-01

最新评论