Nginx 实现单端口与 IP 访问多个 Vue 前端的完整流程

在现代 Web 开发中，常常会遇到需要在同一台服务器上部署多个 Vue 前端应用，并通过单端口和 IP 进行访问的需求。下面将详细介绍实现这一目标的完整流程。

确保您已经在服务器上成功安装了 Nginx。如果尚未安装，可以通过服务器的包管理工具进行安装。

接下来，为每个 Vue 前端应用生成相应的构建产物。通常，构建完成后会得到包含静态资源（如 HTML、CSS、JavaScript 文件等）的文件夹。

然后，在 Nginx 的配置文件中进行相关设置。打开 Nginx 的配置文件，一般位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-enabled/default 。

在配置文件中，使用 server 指令来定义每个 Vue 前端应用的访问规则。例如：

server {
    listen 80;
    server_name example1.com;

    location / {
        root /path/to/vue-app1/dist;
        try_files $uri $uri/ /index.html;
    }
}

server {
    listen 80;
    server_name example2.com;

    location / {
        root /path/to/vue-app2/dist;
        try_files $uri $uri/ /index.html;
    }
}

在上述配置中，listen 80 表示监听 80 端口，server_name 是您要访问的域名，root 则指定了对应 Vue 前端应用的构建产物所在路径。

配置完成后，保存配置文件并重新加载 Nginx 服务，使配置生效。

通过以上步骤，就可以实现通过单端口和 IP 访问多个 Vue 前端应用。需要注意的是，域名的解析要正确配置，确保能够指向服务器的 IP 地址。

还可以根据实际需求进行更多的优化配置，如设置缓存策略、处理错误页面、配置 SSL 证书实现 HTTPS 访问等。

通过合理配置 Nginx，能够轻松实现单端口与 IP 访问多个 Vue 前端应用，为用户提供更加便捷和高效的访问体验。