Nginx 部署前端 Vue 项目实战指南

Nginx 简介

Nginx 是一款轻量级 HTTP 服务器，采用事件驱动的异步非阻塞架构，IO 性能优异，常用于反向代理和负载均衡。

主要优势：

• 高并发支持：基于 epoll 机制，官方测试可达 5 万并发，生产环境稳定支撑 2-4 万连接。
• 内存占用低
• 配置简洁
• 功能丰富：支持灰度发布、负载均衡等

安装 Nginx

Windows 环境

直接下载对应版本的压缩包并解压即可。

启动服务：

cd F:\nginx-1.19.4
start nginx

Linux 环境

生产环境推荐使用 Linux。安装方式主要有两种：使用官方编译包或源码编译。

• 官方包：参考 Nginx 官方文档
• 源码编译：下载 tar.gz 包自行编译，详见 Building from Sources

Windows 与 Linux 部署 Vue 的核心逻辑一致，只需将构建好的 dist 目录上传至服务器，修改 Nginx 配置中的 root 路径指向该目录即可。

重启服务示例：

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

打包 Vue 项目

在项目根目录执行以下命令生成静态资源：

npm run build

（此处建议展示构建成功的控制台输出截图）

配置 Nginx

编辑 conf/nginx.conf 文件，找到 server 块并进行如下配置。这一步很关键，解决了 Vue Router History 模式刷新 404 的问题。

server {
    listen 80;
    server_name localhost;
    root /path/to/vue/dist; # 请替换为实际 dist 目录路径

    location / {
        try_files $uri $uri/ @router;
        index index.html index.htm;
    }

    location @router {
        rewrite ^.*$ /index.html last;
    }
}

配置说明：

1. root 指向 Vue 打包后的 dist 文件夹。
2. try_files 指令优先尝试匹配真实文件，若失败则转发给 @router 处理。
3. @router 重写所有请求为 index.html，由前端路由接管后续跳转，避免后端找不到资源。

配置完成后，重载 Nginx 生效：