---
URL: "/zh-CN/blog/2026-02/nginx-proxy.html"
LLMS_URL: "/zh-CN/blog/2026-02/nginx-proxy.md"
lastUpdated: true
commentabled: true
recommended: true
title: "前端项目部署 Nginx 代理"
description: "Vue3 + Vite 项目部署到 Nginx 的配置方案"
date:

pageClass: "blog-page-class"
cover: "/covers/nginx.svg"
---

---
lastUpdated: true
commentabled: true
recommended: true
title: 前端项目部署 Nginx 代理
description: Vue3 + Vite 项目部署到 Nginx 的配置方案
date: 2026-02-04 09:45:00 
pageClass: blog-page-class
cover: /covers/nginx.svg
---

根据你的需求，你需要将多个 Vue3 + Vite 项目部署到同一个 Nginx 服务器上，并且希望通过不同端口或路径访问不同项目。

以下是几种配置方案：

## 方案一：通过不同路径访问不同项目（共享端口） ##

假设你的项目结构如下：

- `/mydist/`- 第一个项目
- `/mydemo/`- 第二个项目
- `/mylist/`- 第三个项目

*Nginx 配置示例*：

```nginx
 server {
    listen 80;
    server_name your-domain.com;
     # 第一个项目 - mydist
    location /mydist/ {
        alias /path/to/your/mydist/;
        try_files $uri $uri/ /mydist/index.html;
    }

    # 第二个项目 - mydemo
    location /mydemo/ {
        alias /path/to/your/mydemo/;
        try_files $uri $uri/ /mydemo/index.html;
    }

    # 第三个项目 - mylist
    location /mylist/ {
        alias /path/to/your/mylist/;
        try_files $uri $uri/ /mylist/index.html;
    }
}
```

*注意事项*​：

确保每个 Vue 项目的 `vite.config.ts`中设置了正确的 `base`：

```ts
// mydist 项目的配置
export default defineConfig({
  base: '/mydist/',
  // 其他配置...
})
```

## 方案二：通过不同端口访问不同项目 ##

```nginx
# 第一个项目 - mydist (端口 8001)
server {
    listen 8001;
    server_name your-domain.com;

    location / {
        root /path/to/your/mydist;
        try_files $uri $uri/ /index.html;
    }
}

# 第二个项目 - mydemo (端口 8002)
server {
    listen 8002;
    server_name your-domain.com;

    location / {
        root /path/to/your/mydemo;
        try_files $uri $uri/ /index.html;
    }
}

# 第三个项目 - mylist (端口 8003)
server {
    listen 8003;
    server_name your-domain.com;

    location / {
        root /path/to/your/mylist;
        try_files $uri $uri/ /index.html;
    }
}
```

*注意事项*​：

这种情况下，Vue 项目的 `base` 可以设置为 `/`：

```ts
export default defineConfig({
  base: '/',
  // 其他配置...
})
```

**访问方式**：

- mydist: `http://your-domain.com:8001`
- mydemo: `http://your-domain.com:8002`
- mylist: `http://your-domain.com:8003`

## Nginx 中 `root` 和 `alias` 的区别与使用场景 ##

`root` 和 `alias` 都是 Nginx 中用于指定文件系统路径的指令，但它们的工作方式有重要区别。

主要区别

|  特性  |  root  |   alias  |
| :-----------: | :----: | :----: |
| ​路径处理 | ​会将 `location` 部分追加到路径后  |  完全替换 `location` 部分 |
| ​结尾斜杠 | ​通常不需要  |  必须与 `location` 匹配 |
| ​使用场景 | ​一般目录  |  需要精确映射的特殊目录 |

### `root` 的工作方式 ###

```nginx
location /static/ {
    root /var/www/html;
}
```

当访问 `/static/image.jpg` 时，Nginx 会查找：

```txt
/var/www/html/static/image.jpg
```

注意：`root` 会将完整的 URI 路径（包括 `location` 部分）追加到指定的目录后。

#### `alias` 的工作方式 ###

```nginx
location /static/ {
    alias /var/www/static_files/;
}
```

当访问 `/static/image.jpg` 时，Nginx 会查找：

```txt
/var/www/static_files/image.jpg
```

注意：`alias` 会用指定的路径完全替换 `location` 部分。

## 重要注意事项 ##

### ​斜杠问题 ###

使用 `alias` `时，location` 和 `alias` 的结尾斜杠必须一致。

**正确**：

```nginx
 location /static/ {
     alias /var/www/files/;
 }
```

**错误**：

```nginx
 location /static {
     alias /var/www/files/;
 }
```

### ​正则表达式 `location` ###

在正则表达式 `location` 块中只能使用 `alias`，不能使用 `root`。

### ​性能考虑 ###

`root` 通常比 `alias` 稍微高效一点，因为少了一次路径替换操作,但在大多数情况下差异可以忽略不计。