需求描述

• 在某些情况下，同一个域名下，要布置多个子项目
• 比如公司没钱，资源紧张，域名少，域名临时没有申请下来，不够用等
• 或者主项目下，要有其他子项目的时候
• 这个时候，我们需要把子项目给做相应的修改
• 同时，nginx做对应的修改，才能实现文章标题的需求功能
• 注意：主项目一般不用做修改，主要是其他的子项目做修改
• 这里主项目是vue2+webpack
• 子项目是vue3+vite
• 如下步骤，是子项目部署流程环节

部署示例效果

大家可以点击看一下这个实例

• 笔者的主网站：ashuai.work/
• 笔者的主网站下的子网站：ashuai.work/extraPro/

1 子项目的vite.config.js文件的base添加区分其他项目的前缀，比如/extraPro/

如下代码，若是生产环境，就给打包的结果添加/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 = {
        // 生产环境加上前缀处理
        base: isProduction ? '/extraPro/' : '/',
        resolve: { ... },
        plugins: [vue()],
        server: { ...}
    };
    return config;
});

• 这样的话，打包的dist文件中的index.html文件
• 就会在静态资源链接的地方均带有/extraPro/前缀

如下图

• 但是这样，还是不够的，因为子项目也有路由
• 路由之前，要跳转的
• 所以，子项目在路由跳转的地方也要添加/extraPro/前缀
• 否则，子项目路由跳转，就跳到主项目
• 但是主项目没有/extraPro/之类的路由
• 所以就是404的页面
• 就是确保子项目也能跳到子项目的路由前缀

2 子项目createRouter路由跳转的地方，加/extraPro/

加上这个/extraPro/前缀后，子项目就可以在子项目的路由之间，相互正常跳转了

// router.js

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

• 到这一步，子项目已经基本ok了
• 是基本OK
• 可能还有一些细节需要微调
• 接下来，就是服务器的nginx配置修改
• 然后就搞定了

3 在原来的nginx配置下，再新增一个location定位子项目前缀

• 这是原来的主项目的nginx配置
• 我们默认是80端口吧
• 主项目的nginx不用修改，继续用

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;
        }
    }
}

• 然后，在上面的主项目的nginx的server里面，新增一个location
• 专门去定位子项目的，如下nginx配置：

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;
    }

    # 同一个域名部署多个额外的项目，比如我要再加一个extraPro前缀的项目（子项目）
    location /extraPro/ {
        alias C:/nginx-1.18.0/html/extraPro/dist/;
        try_files $uri $uri/ /extraPro/index.html;
    }
}

上述子项目配置语法解释：

location /extraPro/ { ... }

• 意思是为 /extraPro/ 路径配置处理规则。比如我的额外的子项目，都能够通过类似的配置来处理该子项目的请求。

• alias C:/nginx-1.18.0/html/extraPro/dist/;

  • 该语法将请求的 /extraPro/ 路径映射到文件系统中的 C:/nginx-1.18.0/html/extraPro/dist/ 目录。与 root 不同，alias 会将整个路径替换掉，而不是附加在指定的根目录后。
  • 例如，访问 localhost/extraPro/index.html 时，Nginx 会从 C:/nginx-1.18.0/html/extraPro/dist/index.html 读取文件返回给浏览器解析。
  • 这样的话，就是能读取到子项目的html文件了

• try_files $uri $uri/ /extraPro/index.html;

  • 该指令与主项目的 try_files 指令类似，首先会尝试查找请求的文件，如果没有找到则返回 /extraPro/index.html。这是为了确保 SPA 应用能够正确加载。

综上所述：

子项目、即额外的项目 /extraPro/ 会将请求路由到 C:/nginx-1.18.0/html/extraPro/dist/ 目录下，同样，任何无法匹配的路径也会返回 /extraPro/index.html，以支持该子项目的前端路由。

这样的话，就可以做到，在同一个 Nginx 服务器上托管多个独立的前端项目，且每个项目都可能有自己的路由处理。

4. 细节微调，检查子项目中，是否有未能够添加到/extraPro/前缀的

• 比如，带有iframe的public文件夹下的资源引用
• 也要手动修改一下，添加/extraPro/前缀
• 如下：

原来的：

<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>

至此，恭喜你学会了：同一个域名下，部署多个项目...

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