nginx部署多个vue项目

 

部署多个Vue项目到Nginx可以通过不同的方式实现，下面是一种常用的方式。

 

1. 安装Nginx

 

首先，确保已经安装了Nginx。可以通过以下命令来安装：

 

```

sudo apt-get update

sudo apt-get install nginx

```

 

2. 创建Nginx配置文件

 

在Nginx的配置目录下创建一个新的配置文件，例如`/etc/nginx/conf.d/vue.conf`。可以使用任何文本编辑器打开该文件。

 

```

sudo nano /etc/nginx/conf.d/vue.conf

```

 

在这个文件中，我们将配置多个Vue项目的代理。

 

3. 配置*个Vue项目

 

首先，我们配置*个Vue项目。以下是一个示例配置：

 

```

server {

listen 80;

server_name your-domain.com;

 

location / {

proxy_pass http://localhost:3000;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection 'upgrade';

proxy_set_header Host $host;

proxy_cache_bypass $http_upgrade;

}

}

```

 

这个配置将把所有来自`your-domain.com`的请求代理到本地的3000端口上。确保替换`your-domain.com`为你自己的域名，并将`3000`更改为你自己的Vue项目的端口号。

 

保存并关闭文件。

 

4. 配置第二个Vue项目

 

为了配置第二个Vue项目，我们需要创建一个新的服务器块。以下是一个示例配置：

 

```

server {

listen 80;

server_name another-domain.com;

 

location / {

proxy_pass http://localhost:4000;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection 'upgrade';

proxy_set_header Host $host;

proxy_cache_bypass $http_upgrade;

}

}

```

 

这个配置将把所有来自`another-domain.com`的请求代理到本地的4000端口上。替换`another-domain.com`为你自己的域名，并将`4000`更改为你自己的Vue项目的端口号。

 

保存并关闭文件。

 

5. 重启Nginx

 

完成以上配置后，保存并关闭文件。然后，重新启动Nginx以使配置生效：

 

```

sudo service nginx restart

```

 

设置的Vue项目现在应该可以通过指定的域名进行访问了。

 

以上是一种部署多个Vue项目到Nginx的方式，当然还有其他的方法和技巧可以实现相同的目标。根据你的具体需求和环境，可能需要进行一些适当的调整和改变。