Nginx同端口部署多個(gè)vue以及unapp項(xiàng)目
問(wèn)題描述
同一個(gè)端口部署pc和app端項(xiàng)目,Nginx配置,前端打包配置
解決方案
配置pc端vue項(xiàng)目打包配置


配置uniapp項(xiàng)目打包配置,manifest.json文件添加配置
"h5": {
"router": {
"mode": "hash",
"base": "./"http://改為 /app/
},
// pubilcPath的路徑要和H5配置中的運(yùn)行基礎(chǔ)路徑一致
"publicPath": "./", //改為 /app/
"devServer": {
"disableHostCheck": true,
//禁止訪問(wèn)本地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
項(xiàng)目配置(以項(xiàng)目A和項(xiàng)目B為例)
修改Vite配置文件(vite.config.js)
// 項(xiàng)目A配置(訪問(wèn)路徑:/projectA)
export default defineConfig({
base: ‘/projectA/', // 關(guān)鍵配置:資源基礎(chǔ)路徑
plugins: [vue()],
// 其他配置…
})
// 項(xiàng)目B配置(訪問(wèn)路徑:/projectB)
export default defineConfig({
base: ‘/projectB/',
plugins: [vue()],
// 其他配置…
})2. 調(diào)整路由配置(router.js)
// 兩個(gè)項(xiàng)目均需修改路由歷史模式
import { createRouter, createWebHistory } from ‘vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), // 自動(dòng)匹配base配置
routes: [
// 路由定義…
]
})Nginx配置(關(guān)鍵步驟)
nginx
server {
listen 80;
server_name your-domain.com;主項(xiàng)目配置(假設(shè)項(xiàng)目A為主項(xiàng)目)
location / {
root /var/www/projectA/dist;
index index.html;
try_files $uri $uri/ /projectA/index.html; # 路由回退配置
}子項(xiàng)目配置(項(xiàng)目B)
location /projectB {
alias /var/www/projectB/dist; # 注意使用alias而非root
index index.html;
try_files $uri $uri/ /projectB/index.html;
}可繼續(xù)添加更多項(xiàng)目…
location /projectC { … }
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
一文搞懂Nginx限流(簡(jiǎn)單實(shí)現(xiàn))
這篇文章主要介紹了一文搞懂Nginx限流(簡(jiǎn)單實(shí)現(xiàn)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
nginx實(shí)現(xiàn)重寫(xiě)功能和防盜鏈功能
這篇文章主要介紹了nginx實(shí)現(xiàn)重寫(xiě)功能和防盜鏈功能,Nginx服務(wù)器利用 ngx_http_rewrite_module 模塊解析和處理rewrite請(qǐng)求,防盜鏈基于客戶端攜帶的referer實(shí)現(xiàn),文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-06-06
nginx禁止dedecms目錄php執(zhí)行權(quán)限
nginx禁止dedecms目錄php執(zhí)行權(quán)限,找到配置fastcgi.conf文件,一般在/usr/local/nginx/conf/下面,修改如下2014-01-01
Nginx大并發(fā)優(yōu)化實(shí)戰(zhàn)
這篇文章主要介紹了Nginx大并發(fā)優(yōu)化實(shí)戰(zhàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
使用?nginx?搭建代理服務(wù)器(正向代理?https?網(wǎng)站)的詳細(xì)步驟
這篇文章主要介紹了使用?nginx?搭建代理服務(wù)器(正向代理?https?網(wǎng)站)指南的相關(guān)操作,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
在Nginx中配置image filter模塊來(lái)實(shí)現(xiàn)動(dòng)態(tài)生成縮略圖
這篇文章主要介紹了在Nginx中配置image filter模塊來(lái)實(shí)現(xiàn)動(dòng)態(tài)生成縮略圖的方法,包括縮略圖尺寸的設(shè)置等方面的介紹,需要的朋友可以參考下2015-12-12
Nginx主動(dòng)健康檢查的實(shí)戰(zhàn)指南
在微服務(wù)與高并發(fā)架構(gòu)的江湖里,Nginx不僅是流量的守門(mén)人,更是系統(tǒng)的免疫系統(tǒng),今天,我們要徹底打破這種被動(dòng)局面,深入剖析如何利用主動(dòng)健康檢查,賦予Nginx未卜先知的能力,構(gòu)建真正堅(jiān)如磐石的高可用負(fù)載均衡層,需要的朋友可以參考下2025-12-12

