在同一个端口部署两个 Vue 打包后的静态目录 dist1 和

在同一个端口部署两个 Vue 打包后的静态目录 dist1 和 dist2

在项目开发和部署中，很多时候我们希望能够在同一个服务器和同一个端口下同时部署多个 Vue 项目。例如，我们有两个打包好的 Vue 项目 dist1 和 dist2，并且希望用户访问 http://127.0.0.1:3308/ 时可以加载 dist1，访问 http://127.0.0.1:3308/dist2/ 时加载 dist2。

本文将详细介绍如何在 Nginx 中配置同一个端口来处理这两个静态项目，并解答一个常见问题：为什么 dist2 的 root 路径不应该直接写成 /var/www/html/dist2？

---

项目结构与需求分析

我们有两个已经打包好的 Vue 项目，分别位于以下目录中：

• dist1：位于 /var/www/html/dist1/
• dist2：位于 /var/www/html/dist2/

希望的访问方式如下：

• http://127.0.0.1:3308/：加载 dist1，即 /var/www/html/dist1/index.html。
• http://127.0.0.1:3308/dist2/：加载 dist2，即 /var/www/html/dist2/index.html。

Nginx 配置步骤

基本 Nginx 配置

要实现这个需求，首先需要修改 Nginx 配置文件（通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default）。在配置中使用两个 location 块来区分对不同路径的处理。

完整的 Nginx 配置如下：

server {
    listen 3308;

    # 处理默认路径 http://127.0.0.1:3308/
    location / {
        root /var/www/html/dist1;  # 指向 dist1 的根目录
        index index.html;           # 默认返回的首页文件
        try_files $uri $uri/ /index.html;  # 处理 Vue 单页应用的路由
    }

    # 处理 http://127.0.0.1:3308/dist2/ 开头的请求
    location /dist2/ {
        root /var/www/html;         # 指向 dist2 项目根目录的上一级
        index index.html;           # 默认返回的首页文件
        try_files $uri $uri/ /dist2/index.html;  # 处理 Vue 单页应用的路由
    }
}

重要配置说明

1. listen 3308;：Nginx 监听 3308 端口，处理所有来自该端口的请求。

2. location / {}：处理所有以 / 开头的请求，这意味着访问 http://127.0.0.1:3308/ 时，将加载 dist1 项目。root 指向 /var/www/html/dist1，并通过 try_files 保证 Vue 的路由功能正常工作。

3. location /dist2/ {}：处理所有以 /dist2/ 开头的请求，root 指向 /var/www/html，而非 /var/www/html/dist2，这一点非常关键，后面我们会详细解释原因。

---

为什么 dist2 的 root 路径不直接写成 /var/www/html/dist2？

初次接触 Nginx 配置时，很多开发者可能会直观地认为 location /dist2/ 的 root 应该直接设置为 /var/www/html/dist2，毕竟 dist2 项目就存放在这个目录下。然而，实际上这样配置会导致错误的路径解析。

Nginx 的 root 与 URI 追加机制

Nginx 中的 root 指令会将请求的 URI 追加到指定的路径上，然后进行文件查找。举例来说：

• root /var/www/html/dist2;：如果用户访问 http://127.0.0.1:3308/dist2/，Nginx 会将 /dist2/ 这个 URI 追加到 root，最终查找的路径是 /var/www/html/dist2/dist2/，这是一个错误的路径，因为实际的文件应该在 /var/www/html/dist2/ 而非 /var/www/html/dist2/dist2/。

• root /var/www/html;：正确的做法是将 root 设置为 /var/www/html，这样 Nginx 会将请求的 /dist2/ 追加到 /var/www/html，查找的路径是 /var/www/html/dist2/，这就是我们想要的结果。

举例分析

如果我们配置如下：

location /dist2/ {
    root /var/www/html/dist2;
    index index.html;
    try_files $uri $uri/ /index.html;
}

那么当访问 http://127.0.0.1:3308/dist2/ 时，Nginx 实际查找的文件路径会是 /var/www/html/dist2/dist2/index.html，显然这并不是我们期望的路径，最终会导致 404 Not Found 错误。

因此，正确的配置应为：

location /dist2/ {
    root /var/www/html;
    index index.html;
    try_files $uri $uri/ /dist2/index.html;
}

这样 Nginx 会查找 /var/www/html/dist2/ 目录中的文件，确保路径解析正确。

---

总结

在这篇文章中，我们详细介绍了如何在 Nginx 中配置同一个端口来处理两个打包后的 Vue 静态项目。通过设置 location 块来区分不同的请求路径，我们可以灵活地控制静态资源的加载。

同时，我们解答了一个常见的配置问题：为什么 dist2 的 root 不应该直接设置为 /var/www/html/dist2。这主要是由于 Nginx 的 URI 追加机制决定的，理解这一点对于正确配置 Nginx 路由至关重要。

希望这篇文章能够帮助到在实际项目中需要部署多个 Vue 应用的开发者。