Nginx同端口部署多個vue以及unapp項目
更新時間：2026年01月12日 08:55:54 作者：棉花糖先生
文章詳細(xì)介紹了如何在同一端口下部署PC端和App端項目,包括Nginx配置、前端打包配置、manifest.json配置以及針對Vue3+vite項目的特殊配置,通過示例項目A和項目B,展示了如何修改Vite配置文件、調(diào)整路由配置,并通過Nginx進(jìn)行關(guān)鍵配置
問題描述
同一個端口部署pc和app端項目，Nginx配置，前端打包配置
解決方案
配置pc端vue項目打包配置
配置uniapp項目打包配置，manifest.json文件添加配置
"h5": {
"router": {
"mode": "hash",
"base": "./"http://改為 /app/
},
// pubilcPath的路徑要和H5配置中的運(yùn)行基礎(chǔ)路徑一致
"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/', // 關(guān)鍵配置：資源基礎(chǔ)路徑
plugins: [vue()],
// 其他配置…
})
// 項目B配置（訪問路徑：/projectB）
export default defineConfig({
base: ‘/projectB/',
plugins: [vue()],
// 其他配置…
})2. 調(diào)整路由配置（router.js）
// 兩個項目均需修改路由歷史模式
import { createRouter, createWebHistory } from ‘vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), // 自動匹配base配置
routes: [
// 路由定義…
]
})Nginx配置（關(guān)鍵步驟）
nginx
server {
listen 80;
server_name your-domain.com;主項目配置（假設(shè)項目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;
}可繼續(xù)添加更多項目…
location /projectC { … }
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Nginx路徑重寫方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Nginx (engine x) 是一個高性能的HTTP和反向代理服務(wù)，也是一個IMAP/POP3/SMTP服務(wù)。這篇文章主要介紹了Nignx緩存文件與動態(tài)文件自動均衡的配置,需要的朋友可以參考下2018-09-09
Nginx出現(xiàn)403 Forbidden問題的常見原因與解決
Nginx 返回 403 Forbidden 錯誤通常表示客戶端沒有權(quán)限訪問請求的資源,這種錯誤有許多可能的原因,本文將為大家介紹一下常見的原因和對應(yīng)的解決方法,希望對大家有所幫助2025-03-03
云服務(wù)器使用寶塔搭建Python環(huán)境,運(yùn)行django程序
本文詳細(xì)講解了在云服務(wù)器使用寶塔搭建Python環(huán)境，運(yùn)行django程序的方法。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12
本文主要介紹了Nginx部署多個vue項目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Nginx 是一款高性能的 HTTP 和反向代理服務(wù)器,也是一個 IMAP/POP3/SMTP 代理服務(wù)器,本文檔將介紹如何使用 Nginx 配置請求轉(zhuǎn)發(fā),并解釋一些常用的配置參數(shù),需要的朋友可以參考下2024-10-10
這篇文章主要為大家介紹了0基礎(chǔ)部署Nginx服務(wù)的實(shí)現(xiàn)方式，非常簡單詳細(xì)零基礎(chǔ)小白跟著做也可以完成，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-03-03
在Ubuntu 20.04上配置Nginx和PHP 8.0以支持視頻上傳,介紹了調(diào)整Nginx和PHP的配置文件,增加上傳文件大小限制,調(diào)整超時時間和緩沖區(qū)大小等相關(guān)配置,感興趣的可以了解一下2025-02-02
這篇文章主要介紹了詳解nginx代理天地圖做緩存解決跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
nginx禁止直接通過ip進(jìn)行訪問并跳轉(zhuǎn)到自定義500頁面的操作
這篇文章主要介紹了nginx禁止直接通過ip進(jìn)行訪問并跳轉(zhuǎn)到自定義500頁面的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-05-05