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

更新日期：2026-03-06 2阅读

问题描述同一个端口部署pc和app端项目，Nginx配置，前端打包配置解决方案配置pc端vue项目打包配置配置uniapp项目打包配置，manifest.json文件添加配置12345678910111213141···

问题描述

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

解决方案

配置pc端vue项目打包配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"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配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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）

1
2
3
4
5
6
7
8
9
10
11
12
13
// 项目A配置（访问路径：/projectA）
export default defineConfig({
base: ‘/projectA/', // 关键配置：资源基础路径
plugins: [vue()],
// 其他配置…
})
 
// 项目B配置（访问路径：/projectB）
export default defineConfig({
base: ‘/projectB/',
plugins: [vue()],
// 其他配置…
})

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

1
2
3
4
5
6
7
8
9
// 两个项目均需修改路由历史模式
import { createRouter, createWebHistory } from ‘vue-router'
 
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), // 自动匹配base配置
routes: [
// 路由定义…
]
})

Nginx配置（关键步骤）

1
2
3
4
nginx
server {
listen 80;
server_name your-domain.com;

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

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

子项目配置（项目B）

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

可继续添加更多项目…

1
2
3
location /projectC { … }
 
}


以上就是VPS主机测评网和您分享的“Nginx同端口部署多个vue以及unapp项目”，希望对大家有所帮助，如果大家还有什么问题的话，欢迎在下面评论留言，VPS测评网知无不言！

本文标题：Nginx同端口部署多个vue以及unapp项目

猜你喜欢：

华纳云开春采购：香港云服务器200M大带宽低至236元/年，美国CN2云服务器4H8G季付仅396元，支持支付宝/Paypal

搬瓦工：建站/Tiktok中转/CN2 GIA/9929/CMIN2/美国/香港/日本/海外优化线路服务器，支持支付宝/Paypal

justhost东京/新加坡/洛杉矶春季爆款上线，全球VPS最高直降45%，23元/月起，支持支付宝/Paypal

CstoneCloud欢庆元宵，全场限时六折：英国/美国9929优化，住宅双ISP，香港CN2 VPS，全面解锁TK/AI/流媒体

moonvm春季VPS特惠：8折促销香港HKT(动态IP)/台湾HiNet，5折促销香港HGC

edgenat全场VPS循环8折，低至32元，香港/韩国/日本/美国，提供双ISP住宅IP
本文地址：https://www.vpsce.cn/178.html
文章版权声明：

本站所有文章皆是来自互联网，转载请以超链接形式注明出处

相关阅读

  • 2026年免费网站统计平台工具对比推荐
  • Nginx配置文件解析与虚拟主机搭建过程
  • Nginx静态资源优化、压缩、缓存详解
  • Nginx缓存清理实现方式
  • Nginx配置带SSL认证的转发方式 (HTTPS请求)
  • Nginx同端口部署多个vue以及unapp项目
  • Linux磁盘检测、修复与备份恢复的详细指南
  • Linux系统监控与故障排查的命令大全

    • 发表评论

    评论列表
    未查询到任何数据！

    最近发表

    标签列表