記錄---五分鐘帶你學(xué)會(huì)，同一個(gè)域名下，部署多個(gè)項(xiàng)目

????? 寫在開頭

點(diǎn)贊 + 收藏 === 學(xué)會(huì)??????

需求描述

在某些情況下，同一個(gè)域名下，要布置多個(gè)子項(xiàng)目
比如公司沒錢，資源緊張，域名少，域名臨時(shí)沒有申請(qǐng)下來(lái)，不夠用等
或者主項(xiàng)目下，要有其他子項(xiàng)目的時(shí)候
這個(gè)時(shí)候，我們需要把子項(xiàng)目給做相應(yīng)的修改
同時(shí)，nginx做對(duì)應(yīng)的修改，才能實(shí)現(xiàn)文章標(biāo)題的需求功能
注意：主項(xiàng)目一般不用做修改，主要是其他的子項(xiàng)目做修改
這里主項(xiàng)目是vue2+webpack
子項(xiàng)目是vue3+vite
如下步驟，是子項(xiàng)目部署流程環(huán)節(jié)

部署示例效果

大家可以點(diǎn)擊看一下這個(gè)實(shí)例

筆者的主網(wǎng)站：ashuai.work/
筆者的主網(wǎng)站下的子網(wǎng)站：ashuai.work/extraPro/

1 子項(xiàng)目的vite.config.js文件的base添加區(qū)分其他項(xiàng)目的前綴，比如/extraPro/

如下代碼，若是生產(chǎn)環(huán)境，就給打包的結(jié)果添加/extraPro/前綴

// vite.config.js

import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
    const isProduction = mode === 'production';
    const config = {
        // 生產(chǎn)環(huán)境加上前綴處理
        base: isProduction ? '/extraPro/' : '/',
        resolve: { ... },
        plugins: [vue()],
        server: { ...}
    };
    return config;
});

這樣的話，打包的dist文件中的index.html文件
就會(huì)在靜態(tài)資源鏈接的地方均帶有/extraPro/前綴

如下圖

但是這樣，還是不夠的，因?yàn)樽禹?xiàng)目也有路由
路由之前，要跳轉(zhuǎn)的
所以，子項(xiàng)目在路由跳轉(zhuǎn)的地方也要添加/extraPro/前綴
否則，子項(xiàng)目路由跳轉(zhuǎn)，就跳到主項(xiàng)目
但是主項(xiàng)目沒有/extraPro/之類的路由
所以就是404的頁(yè)面
就是確保子項(xiàng)目也能跳到子項(xiàng)目的路由前綴

2 子項(xiàng)目createRouter路由跳轉(zhuǎn)的地方，加/extraPro/

加上這個(gè)/extraPro/前綴后，子項(xiàng)目就可以在子項(xiàng)目的路由之間，相互正常跳轉(zhuǎn)了

// router.js

import { createRouter, createWebHistory } from 'vue-router'
export const routes =  [ ... ]
const router = createRouter({
    history: createWebHistory('/extraPro'),
    routes
})

到這一步，子項(xiàng)目已經(jīng)基本ok了
是基本OK
可能還有一些細(xì)節(jié)需要微調(diào)
接下來(lái)，就是服務(wù)器的nginx配置修改
然后就搞定了

3 在原來(lái)的nginx配置下，再新增一個(gè)location定位子項(xiàng)目前綴

這是原來(lái)的主項(xiàng)目的nginx配置
我們默認(rèn)是80端口吧
主項(xiàng)目的nginx不用修改，繼續(xù)用

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    client_max_body_size  10m;

    server {
        listen       80;
        server_name  localhost;
        add_header 'Referrer-Policy' 'origin'; 

        location / {
            try_files $uri $uri/ /index.html;
            root C:/nginx-1.18.0/html/main/dist/;
            index  index.html index.htm;
        }
    }
}

然后，在上面的主項(xiàng)目的nginx的server里面，新增一個(gè)location
專門去定位子項(xiàng)目的，如下nginx配置：

server {
    listen       80;
    server_name  localhost;
    add_header 'Referrer-Policy' 'origin'; 

    # 主項(xiàng)目
    location / {
        try_files $uri $uri/ /index.html;
        root C:/nginx-1.18.0/html/main/dist/;
        index  index.html index.htm;
    }

    # 同一個(gè)域名部署多個(gè)額外的項(xiàng)目，比如我要再加一個(gè)extraPro前綴的項(xiàng)目（子項(xiàng)目）
    location /extraPro/ {
        alias C:/nginx-1.18.0/html/extraPro/dist/;
        try_files $uri $uri/ /extraPro/index.html;
    }
}

上述子項(xiàng)目配置語(yǔ)法解釋：

location /extraPro/ { ... }

意思是為 /extraPro/ 路徑配置處理規(guī)則。比如我的額外的子項(xiàng)目，都能夠通過(guò)類似的配置來(lái)處理該子項(xiàng)目的請(qǐng)求。
alias C:/nginx-1.18.0/html/extraPro/dist/;
- 該語(yǔ)法將請(qǐng)求的 /extraPro/ 路徑映射到文件系統(tǒng)中的 C:/nginx-1.18.0/html/extraPro/dist/ 目錄。與 root 不同，alias 會(huì)將整個(gè)路徑替換掉，而不是附加在指定的根目錄后。
- 例如，訪問(wèn) localhost/extraPro/index.html 時(shí)，Nginx 會(huì)從 C:/nginx-1.18.0/html/extraPro/dist/index.html 讀取文件返回給瀏覽器解析。
- 這樣的話，就是能讀取到子項(xiàng)目的html文件了
try_files $uri $uri/ /extraPro/index.html;
- 該指令與主項(xiàng)目的 try_files 指令類似，首先會(huì)嘗試查找請(qǐng)求的文件，如果沒有找到則返回 /extraPro/index.html。這是為了確保 SPA 應(yīng)用能夠正確加載。

綜上所述：

子項(xiàng)目、即額外的項(xiàng)目 /extraPro/ 會(huì)將請(qǐng)求路由到 C:/nginx-1.18.0/html/extraPro/dist/ 目錄下，同樣，任何無(wú)法匹配的路徑也會(huì)返回 /extraPro/index.html，以支持該子項(xiàng)目的前端路由。

這樣的話，就可以做到，在同一個(gè) Nginx 服務(wù)器上托管多個(gè)獨(dú)立的前端項(xiàng)目，且每個(gè)項(xiàng)目都可能有自己的路由處理。

4. 細(xì)節(jié)微調(diào)，檢查子項(xiàng)目中，是否有未能夠添加到/extraPro/前綴的

比如，帶有iframe的public文件夾下的資源引用
也要手動(dòng)修改一下，添加/extraPro/前綴
如下：

原來(lái)的：

<template>
    <h2>資源</h2>
    <iframe src="/myhtml/html2canvas.html" frameborder="0" width="100%" height="80%"></iframe>
 </template>

要修改成：

<template>
    <h2>資源</h2>
    <iframe src="/extraPro/myhtml/html2canvas.html" frameborder="0" width="100%" height="80%"></iframe>
 </template>

至此，恭喜你學(xué)會(huì)了：同一個(gè)域名下，部署多個(gè)項(xiàng)目...

A good memory is better than a bad pen. Record it down...

本文轉(zhuǎn)載于：https://juejin.cn/post/7499462637022543912

如果對(duì)您有所幫助，歡迎您點(diǎn)個(gè)關(guān)注，我會(huì)定時(shí)更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。

posted @ 2025-05-08 18:11 林恒閱讀(354) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

林恒