it编程 > 前端脚本 > Vue.js

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

24人参与 2026-01-12 Vue.js

问题描述

同一个端口部署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 { … }

}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

您想发表意见!!点此发布评论

推荐阅读

使用Nginx解决跨域问题全过程

12-25

Nginx部署vue项目无法直接访问其他路径的问题及解决

12-25

nginx部署多套vue项目,共用一套后端配置过程

12-25

一文解决Nginx部署Vue项目刷新页面404问题

10-13

nginx部署前端vue项目完整详细指南

09-22

tomcat部署多个端口以及制定路径部署vue3方式

07-31

猜你喜欢

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论