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路径重写方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Nginx缓存文件与动态文件自动均衡的配置脚本

    Nginx缓存文件与动态文件自动均衡的配置脚本

    Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务。这篇文章主要介绍了Nignx缓存文件与动态文件自动均衡的配置,需要的朋友可以参考下
    2018-09-09
  • Nginx出现403 Forbidden问题的常见原因与解决

    Nginx出现403 Forbidden问题的常见原因与解决

    Nginx 返回 403 Forbidden 错误通常表示客户端没有权限访问请求的资源,这种错误有许多可能的原因,本文将为大家介绍一下常见的原因和对应的解决方法,希望对大家有所帮助
    2025-03-03
  • 云服务器使用宝塔搭建Python环境,运行django程序

    云服务器使用宝塔搭建Python环境,运行django程序

    本文详细讲解了在云服务器使用宝塔搭建Python环境,运行django程序的方法。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-12-12
  • Nginx部署多个vue项目的方法步骤

    Nginx部署多个vue项目的方法步骤

    本文主要介绍了Nginx部署多个vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Nginx请求转发配置指南

    Nginx请求转发配置指南

    Nginx 是一款高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器,本文档将介绍如何使用 Nginx 配置请求转发,并解释一些常用的配置参数,需要的朋友可以参考下
    2024-10-10
  • 小白也可以完成的0基础部署Nginx服务

    小白也可以完成的0基础部署Nginx服务

    这篇文章主要为大家介绍了0基础部署Nginx服务的实现方式,非常简单详细零基础小白跟着做也可以完成,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-03-03
  • Nginx+PHP8.0支持视频上传的项目实践

    Nginx+PHP8.0支持视频上传的项目实践

    在Ubuntu 20.04上配置Nginx和PHP 8.0以支持视频上传,介绍了调整Nginx和PHP的配置文件,增加上传文件大小限制,调整超时时间和缓冲区大小等相关配置,感兴趣的可以了解一下
    2025-02-02
  • 详解nginx代理天地图做缓存解决跨域问题

    详解nginx代理天地图做缓存解决跨域问题

    这篇文章主要介绍了详解nginx代理天地图做缓存解决跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • nginx禁止直接通过ip进行访问并跳转到自定义500页面的操作

    nginx禁止直接通过ip进行访问并跳转到自定义500页面的操作

    这篇文章主要介绍了nginx禁止直接通过ip进行访问并跳转到自定义500页面的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-05-05

最新评论