用 Nginx 部署 Vue 项目全过程

Nginx 是什么

Nginx 是一款轻量级 HTTP 服务器，事件驱动、异步非阻塞的架构让它 IO 性能很出色，常用来做反向代理和负载均衡。

几个明显的好处：

• 高并发：IO 多路复用 epoll，官方测试能撑 5 万并发，实际生产环境 2–4 万没问题。
• 内存占用小。
• 配置直观，可商用。

当然，反向代理、灰度发布、负载均衡这些能力它也都有，但部署一个前端 Vue 项目我们暂时用不到那么多。

安装 Nginx

Windows 上直接去官网下载对应的包，安装后启动：

cd F:\nginx-1.19.4 && start nginx

但实际部署很少用 Windows，Linux 才是常态。Linux 下要么用官方编译好的包，要么自己下载源码编译。

• 包管理方式：参考 官方文档
• 源码编译：参考 Building from Sources，本质就是 tar.gz 包丢到服务器上编译。

装好之后，把构建好的 Vue 项目 dist 上传，然后用类似下面的命令重启或重载 Nginx：

# CentOS 7
systemctl restart nginx.service

# CentOS 6
service nginx restart

# 平滑重载（推荐）
service nginx reload

打包 Vue 项目

本地项目根目录执行：

npm run build

dist 就是待部署的静态文件。

配置 Nginx

核心配置在 conf/nginx.conf 里的 server 块。一个典型的前端部署配置：

server {
    listen 80; # 端口没被占用就不用改
    server_name localhost;
    root E:/vue_project/my_project/dist; # 指向打包后的 dist 目录

    location / {
        try_files $uri $uri/@router; # 配合下面的 @router 解决 Vue history 路由刷新 404
        index index.html index.htm;
    }

    location @router {
        rewrite ^.*$/index.html last; # 把所有找不到的路径都丢给 index.html，交给前端路由处理
    }
}

这里 try_files 和 是专门为 Vue 的 history 模式路由准备的——因为那些路径在服务器上并不真实存在，直接访问就会 404，所以需要重写到 。