学习笔记六：在Nginx非根目录下配置同域名多个子项目（Vite2+Vue3）

前言

近期把公司内部管理系统从Vue2升级到Vue3版本，部署时遇到非根目录配置问题，需要在同一个域名的不同目录下配置两个网站，借此做个记录。

• 项目码云（Gitee）仓库地址
• 个人主页

参考链接

• Vite官网打包配置：共享配置 | Vite 官方中文文档
• Vue-Router4配置：API 参考 | Vue Router
• Nginx配置：Sticky Note | Vite项目打包部署Nginx的一些Issue - 掘金
• ruoyi-vue部署在nginx非根目录刷新404（已解决）_weixin_42554373的博客-CSDN博客_nginx 部署ruoyi
• vue项目使用history模式，打包部署到服务器根目录与二级目录的方法，防止刷新后出错_A黄俊辉A的博客-CSDN博客_vue打包history模式
• 一文理清 nginx 中的 location 配置（系列一） - SegmentFault 思否

实现效果

• 访问 https://www.test.com/ ：
  • 登录原Vue2项目网站，不影响路由跳转，无页面刷新404问题；
• 访问 https://www.test.com/vue3/ ：
  • 登录新Vue3项目网站，不影响路由跳转，无页面刷新404问题。

（一）前端配置

1.修改路由配置文件，使用HTML5历史记录模式

// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
    history: createWebHistory("/vue3/"), // 注意前后都要有/
    routes,
});

export default router;

2.修改vite配置文件

// vite.config.js
export default defineConfig({
    build: {
        chunkSizeWarningLimit: 1600, // 解决项目文件过大打包时的警告，可选
    },
    base: "/vue3/", // 关键代码
});

3.打包项目，生成/dist目录

npm run build

4.上传项目文件到服务器目录

• 该步骤其实就是部署前端项目到服务器上。
• 将打包后的 /dist 目录下的内容上传到服务器相应目录即可。

目录路径根据自己项目确定，如下以我的项目为例：

• 原Vue2项目目录： /data/wwwroot/admin
• 新Vue3项目目录： /data/wwwroot/adminvue3

我的项目是在上述目录 git pull 拉取整个项目代码，所以配置Nginx时需要精确定位到 /dist 目录，如：

• /data/wwwroot/admin/dist
• /data/wwwroot/adminvue3/dist

如果服务器目录只包含 /dist 目录下的内容，则配置Nginx时定位到服务器文件夹目录即可，如：

• /data/wwwroot/admin
• /data/wwwroot/adminvue3

（二）Nginx配置

1.修改Nginx配置文件

# Nginx配置文件所在目录
cd /usr/local/nginx/conf/vhost

# Nginx配置文件名称
vim www.test.com.conf

# 按 i 进行编辑模式

# 按 esc 退出编辑

# 编辑完成后按 :q 退出当前配置文件

# 按 :wq 保存当前修改并退出当前配置文件

2.原Vue2项目配置（域名下只有一个项目）

server {
    listen 80;
    listen [::]:80;
    ......
    server_name www.test.com;
    index index.html index.htm index.php;
    root /data/wwwroot/admin/dist;

    location / {
        root /data/wwwroot/admin/dist;
        try_files $uri $uri/ /index.html;
    }
    ......
}

3.部署Vue3项目后的配置内容（同域名下有多个项目）

server {
    listen 80;
    listen [::]:80;
    ......
    server_name www.test.com;
    index index.html index.htm index.php;
    root /data/wwwroot/admin/dist;

    location / {
        root /data/wwwroot/admin/dist;
        try_files $uri $uri/ /index.html;
    }
    location ^~/vue3 {
        alias /data/wwwroot/adminvue3/dist;
        try_files $uri $uri/ /vue3/index.html;
    }
    ......
}

4.关键代码解析

在我的项目中两种写法没有区别。

1）写法一

location ^~/vue3 {
    alias /data/wwwroot/adminvue3/dist;
    try_files $uri $uri/ /vue3/index.html;
}

2）写法二

location ^~/vue3 {
    alias /data/wwwroot/adminvue3/dist;
    try_files $uri $uri/ @router;
}
location @router {
    rewrite ^/(vue3)/(.+)$ /$1/index.html last;
}

3）注意

• location 要写 ^~/vue3 ，写 /vue3 页面会一直空白，并报错找不到 assets 目录下的资源文件。（这个坑卡了一整天=-=||
• 参考location配置：一文理清 nginx 中的 location 配置（系列一） - SegmentFault 思否

因为原Vue2项目的location是 / ， /vue3 会匹配到原Vue2项目，且原项目中没有 /vue3 这个路由，所以页面空白，即没有资源文件。

^~/vue3 表示忽略其他location配置的URI，直接匹配 /vue3 ，所以成功。

（三）重启Nginx，完成部署

# 测试配置文件修改后是否有错
nginx -t

# 重启Nginx服务器
nginx -s reload