nginx配置多个vue项目

Nginx 部署多个Vue项目：两种配置方案详解

在实际开发与部署中，我们经常会遇到一台服务器部署多个Vue项目的需求。本文将详细讲解Nginx部署多个Vue项目的两种主流方案：多端口独立部署和单端口路径区分部署，附完整配置与避坑要点，新手也能直接上手。

一、方案一：多端口部署（独立Server，简单易维护）

方案特点

每个Vue项目占用独立端口，互相隔离、互不影响，配置逻辑清晰，后期维护方便，适合项目数量少、端口资源充足的场景。

配置步骤

直接在Nginx配置文件中，为每个Vue项目新增独立的server块，仅修改监听端口、项目资源路径即可。

完整配置示例

# 第一个Vue项目：监听9001端口，访问地址 http://服务器IP:9001
server {
    listen       9001;  # 独立端口1
    server_name  localhost;

    # 项目1资源映射
    location / {
        root   /home/project/dist;  # 项目1打包后的dist目录
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  # 解决history模式刷新404问题
    }

    # 可按需配置日志、超时等参数
    access_log  logs/vue-project1.log;
}

# 第二个Vue项目：监听9002端口，访问地址 http://服务器IP:9002
server {
    listen       9002;  # 独立端口2（与项目1不同）
    server_name  localhost;

    # 项目2资源映射
    location / {
        root   /home/sub_project/dist;  # 项目2打包后的dist目录
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    access_log  logs/vue-project2.log;
}

核心说明

1. 每个server块对应一个Vue项目，复制模板后改端口和root路径即可；
2. try_files是关键配置，Vue的history路由模式必须加，否则刷新页面会报404；
3. 端口需确保未被占用，可通过netstat -tuln | grep 端口号检查。

二、方案二：单端口部署（同Server，路径区分，节省端口）

方案特点

多个Vue项目共用同一个端口，通过访问路径区分项目（如/为项目A、/sub为项目B），节省服务器端口资源，适合项目数量多、端口紧张的场景。

前置准备：修改Vue项目打包配置

单端口部署需先调整子项目（非根路径项目）的Vue配置，否则资源路径会报错，无法正常加载。

1. 配置vue.config.js：设置publicPath

指定项目打包后的资源基础路径，与Nginx访问路径保持一致。

module.exports = {
  publicPath: '/sub',  // 子项目访问前缀（如 /sub），根项目写 '/'
  outputDir: 'dist',   // 打包输出目录，默认即可
  assetsDir: 'static'  // 静态资源存放目录，默认即可
}

2. 配置路由：设置base路径

路由基础路径需与publicPath完全一致，避免路由跳转异常。

import Router from 'vue-router'
import routers from './routes'

const createRouter = () => new Router({
  base: '/sub',  // 与publicPath一致
  mode: 'history',  // 必须用history模式
  scrollBehavior: () => ({ y: 0 }),
  routes: routers
})

export default createRouter

3. 打包验证

执行npm run build打包后，查看dist/index.html，JS/CSS资源路径会自动加上/sub前缀，如下所示：

<script type="text/javascript" src="/sub/static/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/sub/static/js/app.js"></script>

Nginx配置：单Server映射多路径

所有项目共用一个server块，通过location匹配不同路径，分别指向对应项目的dist目录。

完整配置示例

# 共用9001端口，根路径/为项目1，/sub为项目2
server {
    listen       9001;
    server_name  localhost;

    # 主项目：访问地址 http://服务器IP:9001
    location / {
        root   /home/project/dist;  # 主项目dist目录
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # 子项目：访问地址 http://服务器IP:9001/sub
    location /sub {
        alias   /home/sub_project/dist;  # 子项目dist目录（注意用alias，不用root）
        index   index.html;
        try_files $uri $uri/ /sub/index.html;  # 路径匹配要加/sub
    }

    access_log  logs/vue-multi-project.log;
}

避坑重点

1. 子项目location必须用alias，主项目用root；若混用root，会出现资源404；
2. 子项目try_files末尾要加/sub/index.html，与访问路径一致；
3. 所有Vue项目必须开启history模式，且路由base、publicPath、Nginx路径三者必须统一。

三、两种方案对比总结

四、最后一步：重启Nginx生效

修改配置后，执行以下命令重启Nginx，配置即可生效：

# 检查配置是否正确（必执行，避免配置错误导致Nginx启动失败）
nginx -t

# 重启Nginx
systemctl restart nginx