Nginx 部署 Vue 前端项目实战与配置详解

在现代 Web 开发中，Vue.js 因其组件化和响应式特性成为构建单页应用（SPA）的首选框架之一。而 Nginx 凭借其高性能和稳定性，是部署这类静态资源服务的理想选择。下面我们来梳理一下从本地构建到线上运行的完整流程。

一、准备工作

1.1 开发环境

确保你的 Vue 项目在本地已经开发完成，并能通过 npm run serve 正常启动。虽然 Vue CLI 提供的本地开发服务器方便调试，但它主要用于开发阶段，并不适合直接用于生产环境，因为缺乏必要的性能优化和安全保障。

1.2 服务器环境

你需要一台安装了 Linux（如 Ubuntu 或 CentOS）的服务器。虽然 Node.js 和 npm 在最终部署时不是必需的（因为项目已打包为静态文件），但在本地构建阶段它们是必须的。请确保服务器网络通畅，能够访问外网下载依赖。

1.3 Nginx 安装

如果服务器上尚未安装 Nginx，可以通过包管理器进行安装。以 Ubuntu 为例：

sudo apt update
sudo apt install nginx

安装完成后，检查服务状态确认是否启动成功：

sudo systemctl status nginx

二、构建 Vue 项目

将 Vue 项目部署到 Nginx 前，必须先将其构建成静态文件。在项目根目录下运行以下命令：

npm run build

构建完成后，Vue CLI 会在项目根目录生成一个 dist 文件夹。这里面包含了所有生产环境所需的静态资源，包括 index.html、JavaScript bundle、CSS 样式表以及图片等。

三、上传静态文件到服务器

将 dist 文件夹中的所有文件上传至服务器的指定目录。你可以使用 SCP、FTP 或 SFTP 工具。假设我们将文件上传到 /var/www/vue-app 目录：

scp -r ./dist/* user@your_server_ip:/var/www/vue-app/

四、配置 Nginx

接下来需要编辑 Nginx 配置文件，使其能正确服务于 Vue 项目。配置文件通常位于 /etc/nginx/sites-available/ 目录下。你可以新建一个文件，例如 vue-app.conf，内容如下：

server {
    listen 80;
    server_name your-vue-app.com;
    root /var/www/vue-app;
    index index.html;

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

这里有几个关键点需要注意：

listen 80;：监听 HTTP 默认端口。
server_name：替换为你的实际域名。
root：指向你上传静态文件的目录。
location / { try_files ... }：这是 SPA 路由的核心。由于 Vue 的路由是在前端通过 JavaScript 动态生成的，刷新页面时如果没有这个配置，Nginx 会找不到对应的物理文件而返回 404。这条指令确保所有未匹配的资源都回退到 index.html，让前端路由接管。

如果你将配置放在 sites-available 下，记得创建软链接到 sites-enabled 以启用它：

Nginx 部署 Vue 前端项目实战与配置详解