使用 Nginx 部署前端 Vue 项目：跨平台详细指南

一、为什么选择 Nginx？

Nginx 是一个高性能的 Web 服务器和反向代理服务器，以其稳定性和高并发处理能力而闻名。它可以快速处理静态内容，同时支持负载均衡、反向代理等功能，非常适合部署前端应用，如 Vue 项目。

二、准备工作：构建 Vue 项目

在部署之前，首先需要将 Vue 项目进行打包构建，生成可部署的静态文件。以下是构建步骤：

1. 确保你的项目依赖已经安装完毕：npminstall
2. 运行以下命令进行项目构建：npm run build这将生成一个 dist 目录，里面包含了打包后的静态文件（HTML、CSS、JS等）。

三、在 Ubuntu 系统上部署 Vue 项目

1. 安装 Nginx

在 Ubuntu 上安装 Nginx 的步骤如下：

sudoapt update
sudoaptinstall nginx

安装完成后，启动 Nginx 并将其设置为开机启动：

sudo systemctl start nginx
sudo systemctl enable nginx

2. 配置 Nginx

将打包好的 Vue 项目文件上传到服务器的

/var/www/html/vue-app

目录下。接着，编辑 Nginx 配置文件：

sudonano /etc/nginx/sites-available/vue-app.conf

在文件中添加以下内容：

server {
    listen 80;
    server_name your_domain_or_IP;

    root /var/www/html/vue-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend_server_address;
    }
}

创建一个符号链接到

sites-enabled

目录并重启 Nginx：

sudoln-s /etc/nginx/sites-available/vue-app.conf /etc/nginx/sites-enabled/
sudo nginx -tsudo systemctl reload nginx

至此，Vue 项目已经成功部署在 Ubuntu 上，可以通过浏览器访问域名或 IP 地址来查看效果。

3. 管理 Nginx 服务

• 停止 Nginx：sudo systemctl stop nginx
• 启动 Nginx：sudo systemctl start nginx
• 重启 Nginx：sudo systemctl restart nginx
• 检查 Nginx 状态：sudo systemctl status nginx

四、在 CentOS 系统上部署 Vue 项目

1. 安装 Nginx

在 CentOS 上，首先需要安装 Nginx。可以通过以下命令进行安装：

sudo yum install epel-release
sudo yum install nginx

安装完成后，启动 Nginx 并将其设置为开机启动：

sudo systemctl start nginx
sudo systemctl enable nginx

2. 配置 Nginx

将打包好的 Vue 项目文件上传到服务器的

/usr/share/nginx/html/vue-app

目录下。接着，编辑 Nginx 配置文件：

sudonano /etc/nginx/conf.d/vue-app.conf

添加以下配置：

server {
    listen 80;
    server_name your_domain_or_IP;

    root /usr/share/nginx/html/vue-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend_server_address;
    }
}

测试配置并重启 Nginx：

sudo nginx -tsudo systemctl reload nginx

现在，Vue 项目已经成功部署在 CentOS 上，可以通过域名或 IP 地址进行访问。

3. 管理 Nginx 服务

• 停止 Nginx：sudo systemctl stop nginx
• 启动 Nginx：sudo systemctl start nginx
• 重启 Nginx：sudo systemctl restart nginx
• 检查 Nginx 状态：sudo systemctl status nginx

五、在 Windows 系统上部署 Vue 项目

1. 安装 Nginx

在 Windows 上，首先从Nginx官方下载页面下载 Nginx 的 zip 文件。解压该文件到指定的目录，如

C:\nginx

。

2. 启动 Nginx

在命令提示符中，导航到 Nginx 的目录并启动 Nginx：

cd C:\nginx
start nginx

3. 配置 Nginx

将打包好的 Vue 项目文件复制到

C:\nginx\html\vue-app

目录下，然后编辑

C:\nginx\conf\nginx.conf

文件，添加以下内容：

server {
    listen 80;
    server_name your_domain_or_IP;

    root C:/nginx/html/vue-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend_server_address;
    }
}

重启 Nginx 以应用配置：

nginx -s reload

Vue 项目现已部署在 Windows 系统上，可以通过浏览器访问。

4. 管理 Nginx 服务

• 停止 Nginx：nginx -s stop
• 启动 Nginx：nginx
• 重启 Nginx：nginx -s reload

六、配置 SSL 证书（可选）

在生产环境中，使用 HTTPS 来保护用户数据是非常重要的。你可以使用 Let’s Encrypt 提供的免费 SSL 证书，并通过 Certbot 工具进行自动化配置。以 Ubuntu 为例：

sudoapt-getinstall certbot python3-certbot-nginx
sudo certbot --nginx-d your_domain_or_IP

根据提示完成证书配置，成功后即可通过 HTTPS 访问你的应用。

七、总结

我们详细介绍了如何在 Ubuntu、CentOS 和 Windows 系统上使用 Nginx 部署 Vue 项目。我们涵盖了从项目构建、Nginx 安装与配置、服务管理，到 SSL 证书配置的完整过程。无论你使用的是何种操作系统，希望这篇指南能帮助你顺利地将 Vue 项目上线，并掌握如何管理你的 Nginx 服务器。

如果有任何问题或需要进一步的帮助，欢迎在评论区留言讨论。Happy coding!