nginx部署多个vue项目

# Nginx 配置文件示例，用于部署多个 Vue 项目

server {
    listen 80;
    server_name project1.example.com;

    location / {
        root /var/www/project1/dist;  # 指向 Vue 项目的构建输出目录
        try_files $uri $uri/ /index.html;  # 处理 Vue Router 的 history 模式
    }
}

server {
    listen 80;
    server_name project2.example.com;

    location / {
        root /var/www/project2/dist;  # 指向另一个 Vue 项目的构建输出目录
        try_files $uri $uri/ /index.html;  # 处理 Vue Router 的 history 模式
    }
}

解释说明：

• listen 80: 监听 HTTP 的 80 端口。
• server_name: 指定服务器的域名。每个 server 块对应一个不同的域名，用于区分不同的 Vue 项目。
• location /: 配置如何处理根路径下的请求。
• root: 指向 Vue 项目的构建输出目录（通常是 dist 文件夹）。
• try_files $uri $uri/ /index.html: 这行配置确保了 Vue Router 使用 history 模式时，所有路由都能正确加载 index.html 文件。

通过这种方式，你可以轻松地在同一个 Nginx 实例上部署多个 Vue 项目，并根据不同的域名进行访问。