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

一、什么是 Nginx？

Nginx 是一款轻量级的 HTTP 服务器，采用事件驱动的异步非阻塞处理方式框架，具有极好的 IO 性能。常用于服务端的反向代理和负载均衡。

优点

• 支持海量高并发：采用 IO 多路复用 epoll。官方测试支持 5 万并发链接，实际生产环境可支撑 2-4 万。
• 内存消耗少
• 配置文件简单
• 功能丰富：支持反向代理、灰度发布、负载均衡等。

二、Nginx 部署前端 Vue 项目步骤

2.1 安装 Nginx

2.1.1 Windows 环境

下载系统对应的版本并解压。启动命令如下：

cd F:\nginx-1.19.4
start nginx

2.1.2 Linux 环境

生产环境通常使用 Linux。安装方式主要有两种：使用官方编译好的包，或使用源码构建。 参考官方文档获取安装包或源码：

• 官方包：https://nginx.org/en/linux_packages.html#stable
• 源码构建：https://nginx.org/en/docs/install.html

将构建好的 Vue 项目 dist 上传至服务器，修改 Nginx 配置中的 root 路径指向 dist 目录即可。 重启或重载服务：

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

2.2 打包 Vue 项目

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

npm run build

2.3 配置 Nginx

修改 conf/nginx.conf 文件，调整 server 配置片段。关键配置如下：

server {
    listen 80;
    server_name localhost;
    root E:/vue_project/my_project/dist;

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

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

配置说明： Vue 项目通常使用 History 模式路由，刷新页面时若直接访问子路径会报 404。上述配置通过 try_files 尝试匹配文件，若失败则重定向到 @router 处理区，最终返回 index.html，让前端路由接管请求。

配置完成后重载生效：

nginx -s reload

浏览器访问 http://localhost 验证部署是否成功。