使用nginx实现一个端口和ip访问多个vue前端

在现代Web开发中，使用Vue.js作为前端框架已成为一种趋势。为了将多个Vue前端项目部署在同一台服务器上，并通过不同的IP地址和端口进行访问，我们可以借助Nginx这款高性能的HTTP和反向代理服务器来实现。本文将介绍如何使用Nginx配置多个Vue前端应用，确保它们能够在同一台服务器上正常运行。

一、准备工作

1. 安装Nginx：首先，请确保在你的服务器上安装了Nginx。可以通过以下命令进行安装（以Ubuntu为例）：

bash sudo apt update sudo apt install nginx

1. 构建Vue应用：在本地开发环境中构建你的Vue应用。通常，你会在项目根目录下运行以下命令：

bash npm run build

这会在dist目录下生成生产环境的静态文件。

1. 上传文件：将构建好的文件上传到服务器。假设我们有两个Vue项目，分别名为project1和project2，它们的文件上传路径为：

2. /var/www/project1

3. /var/www/project2

二、Nginx配置

接下来，我们将配置Nginx，使其能够根据不同的IP和端口访问多个Vue应用。打开Nginx的配置文件：

sudo nano /etc/nginx/sites-available/default

以下是一个基本的配置示例：

server {
    listen 80;  # 监听80端口
    server_name 192.168.1.100;  # 你的服务器IP

    location / {
        root /var/www/project1;  # 指向第一个Vue项目的目录
        try_files $uri $uri/ /index.html;  # 处理HTML5路由
    }
}

server {
    listen 81;  # 监听81端口
    server_name 192.168.1.100;  # 同样使用相同的IP

    location / {
        root /var/www/project2;  # 指向第二个Vue项目的目录
        try_files $uri $uri/ /index.html;  # 处理HTML5路由
    }
}

三、配置说明

1. 第一部分配置指定了当用户访问http://192.168.1.100时，Nginx会提供第一个Vue项目的内容。
2. 第二部分配置允许用户通过http://192.168.1.100:81访问第二个Vue项目。
3. try_files $uri $uri/ /index.html;的作用是处理单页应用（SPA）的路由，使得Nginx能够正确返回index.html而不导致404错误。

四、测试和启动Nginx

配置完成后，检查Nginx配置是否正确：

sudo nginx -t

如果没有错误，可以重启Nginx使配置生效：

sudo systemctl restart nginx

五、访问项目

1. 打开浏览器，访问 http://192.168.1.100，你应该能够看到project1的内容。
2. 访问 http://192.168.1.100:81，你将看到project2的内容。

六、总结

通过上述步骤，我们成功地使用Nginx配置了两个Vue前端项目，并能通过不同的端口进行访问。这种方法不仅可以高效利用IP和端口资源，还能够便于管理多个前端应用。Nginx的强大功能使得它成为Web应用部署的首选方案之一。在实际生产环境中，根据需要可以进行更复杂的配置，例如HTTPS支持、反向代理、负载均衡等。

希望本文能对你的项目部署工作有所帮助！