Nginx 部署前端 Vue 项目实战

Nginx 简介

Nginx 是一款轻量级的 HTTP 服务器，采用事件驱动的异步非阻塞处理方式，具有极高的 IO 性能。在生产环境中，它常被用作反向代理和负载均衡器。

核心优势：

• 高并发支持：基于 epoll 机制，官方测试可支撑 5 万并发连接，实际生产环境通常能稳定承载 2-4 万。
• 资源占用低：内存消耗相对较少。
• 配置灵活：配置文件简洁，支持灰度发布、负载均衡等高级功能。

部署步骤

1. 安装 Nginx

虽然 Windows 环境下也能运行 Nginx，但生产环境更推荐使用 Linux。

Windows 环境

直接下载对应版本的压缩包解压即可。启动命令示例：

cd F:\nginx-1.19.4
start nginx

Linux 环境

Linux 下安装主要有两种方式：使用官方编译好的包或源码构建。

• 包管理安装：参考 官方文档。
• 源码编译：下载 tar.gz 包后自行编译，详见 Building from Sources。

无论哪种方式，核心逻辑一致：将打包后的 dist 目录上传至服务器，修改 Nginx 配置中的 root 路径指向该目录。

重启服务命令（以 CentOS 为例）：

# CentOS 7
systemctl restart nginx.service
# 平滑重载配置
service nginx reload

2. 打包 Vue 项目

在本地开发机执行构建命令，生成静态资源：

npm run build

构建完成后，你会得到一个包含 index.html、js、css 等文件的 dist 目录。

3. 配置 Nginx

这是最关键的一步。Vue 作为单页应用（SPA），其路由通常由前端 JS 处理。如果用户直接访问某个子路径（如 /user/profile）并刷新浏览器，Nginx 会尝试寻找该物理文件，导致 404 错误。我们需要配置 Nginx 将所有请求回退到 index.html。

编辑 conf/nginx.conf，找到 server 块，配置如下：

server {
    listen       80;
    server_name  localhost;
    
    # 指向 Vue 项目的 dist 目录
    root   /path/to/your/project/dist;
    index  index.html index.htm;

    location / {
        # 核心配置：优先查找文件，找不到则重写为 index.html
        try_files $uri $uri/ @router;
    }

    # 兜底规则：所有未匹配的路径都返回 index.html
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

：请将 路径替换为你实际的文件路径。Windows 下注意转义斜杠或使用正斜杠。