nginx如何配置多个vue项目？

要在Nginx中配置多个Vue项目，您需要为每个项目设置不同的server块，并为每个项目提供不同的静态资源路径。以下是一个基本的配置示例：

http {
    include       mime.types;
    default_type  application/octet-stream;
 
    # 第一个Vue项目的server配置
    server {
        listen       80;
        server_name  localhost;
 
        location / {
            root   /path/to/your/first/vue/project/dist;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
    }
 
    # 第二个Vue项目的server配置
    server {
        listen       80;
        server_name  localhost;
 
        # 注意这里的路径和第一个项目不同
        location / {
            root   /path/to/your/second/vue/project/dist;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
    }
}

确保将/path/to/your/first/vue/project/dist和/path/to/your/second/vue/project/dist替换为您的Vue项目的实际构建输出目录。

这里的关键点是每个Vue项目都有自己的server块，它们在不同的端口或者不同的URL下提供服务。try_files $uri $uri/ /index.html;指令确保了每个Vue项目都能正确处理前端路由。

参考：百度AI

两种配置方式

如何在nginx配置多个vue项目？第一种是使用不同的端口，既配置多个server即可。第二种是同一个端口，既在一个server里面配置多个vue项目。

参考2：https://blog.csdn.net/BluerCat/article/details/131207177

方法一：使用多个server配置多个vue项目（使用多个端口）

这个方式最简单，将第一份server配置拷贝一下，稍微调整一下就可以了，示例如下：

server {
    listen       9001;
    server_name  localhost;
    # 这个是第一个vue项目 页面访问地址 http://ip:9001/one
    location /one {
         root   /home/project/dist/;
         index  index.html index.htm;
         try_files $uri $uri/ /index.html; # 防止页面刷新404
    }
    ... ...
}

server {
    listen       9002;
    server_name  subhost;
    # 这个是第二个vue项目 页面访问地址 http://ip:9002/two
    location  /two {
         root   /home/sub_project/dist/;
         index   index.html;
         try_files $uri $uri/ /index.html; # 防止页面刷新404
    }
    ... ...
}

方法二：在一个server配置多个项目（共用一个端口）

多个端口，只需要调整nginx配置，若使用同一个端口，则需要稍微调整一下vue打包配置。

server {
    listen       9001;
    server_name  localhost;
    # 这个是第一个vue项目 页面访问地址 http://ip:9001
    location / {
         root   /home/project/dist/;
         index  index.html index.htm;
         try_files $uri $uri/ /index.html;
    }
    # 这个是第二个vue项目 页面访问地址 http://ip:9001/sub
    location  /sub {
         alias   /home/sub_project/dist/;
         index   index.html;
         try_files $uri $uri/ /index.html;
    }
}