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

一、为什么选择 Nginx？

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

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

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

1. 确保你的项目依赖已经安装完毕：

   npm install
   

2. 运行以下命令进行项目构建：

   npm run build
   

   这将生成一个 dist 目录，里面包含了打包后的静态文件（HTML、CSS、JS等）。

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

1. 安装 Nginx

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

sudo apt update
sudo apt install nginx

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

sudo systemctl start nginx
sudo systemctl enable nginx

2. 配置 Nginx

将打包好的 Vue 项目文件上传到服务器的 /var/www/html/vue-app 目录下。接着，编辑 Nginx 配置文件：

sudo nano /etc/nginx/sites-available/vue-app.conf