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

同一个端口部署pc和app端项目Nginx配置前端打包配置解决方案配置pc端vue项目打包配置配置uniapp项目打包配置manifest.json文件添加配置123456789101112131415161718192021222324252627h5: {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配置1234567891011121314151617server {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.js12345678910111213// 项目A配置访问路径/projectAexportdefaultdefineConfig({base: ‘/projectA/, // 关键配置资源基础路径plugins: [vue()],// 其他配置…})// 项目B配置访问路径/projectBexport default defineConfig({base: ‘/projectB/,plugins: [vue()],// 其他配置…})2. 调整路由配置router.js123456789// 两个项目均需修改路由历史模式import { createRouter, createWebHistory } from ‘vue-routerconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),// 自动匹配base配置routes: [// 路由定义…]})Nginx配置关键步骤1234nginxserver {listen 80;server_name your-domain.com;主项目配置假设项目A为主项目12345location / {root/var/www/projectA/dist;index index.html;try_files $uri $uri//projectA/index.html;# 路由回退配置}子项目配置项目B12345location/projectB{alias/var/www/projectB/dist;# 注意使用alias而非rootindex index.html;try_files $uri $uri//projectB/index.html;}可继续添加更多项目…123location/projectC{ … }}总结以上为个人经验希望能给大家一个参考