手把手教 Nginx 部署 Vue 项目

前言

想必大家一定听说过 Nginx，若没听说过它，那么一定听过它的 同行 Apache 吧！Nginx 同 Apache 一样都是一种 Web 服务器。如果你还是对它不够了解，可以自己去深入的学习一下 Nginx 相关的知识，这里不做过多的介绍了，今天我们就来聊聊使用 Nginx 如何来部署我们开发好的前端 Vue 项目。

Nginx 环境搭建

我们要使用 Nginx 那么就必须先要安装它。这里做的演示是本地服务，所以就安装到了自己的本地电脑上，如果是真正的要部署到线上服务器的话，我们需要在公司的服务器上安装 Nginx 来帮助我们来实现前端项目的部署工作。

本地电脑环境： MAC OS

至于怎么安装的话，我这边不做详细的介绍了，网络上像 Windows 上安装 Nginx、Mac 上安装 Nginx，这样的帖子还是非常多的，下面给大家贴出两个链接地址：

• Mac系统下nginx的安装
• windows下nginx的安装及使用

下面是我的 Nginx 的安装目录

安装路径：

/usr/local/Cellar/nginx/1.17.8
复制代码

如果是你安装的，可能版本号不一样，改一下版本号就可以了

前端项目打包

首先我们的前端项目不可能直接放到服务器的根目录下去，一般都会起一个前端服务的项目名称，那么就需要先在打包之前在 Vue 的配置文件里去修改公共路径的配置，改成我们前端项目服务的名字，这里是 admin, 如下图

同时在项目的 router 目录下 index.js 为 Vue 项目指定路由基本路径为 /admin/

在 Vue 项目的根目录执行下面的命令，打包成 dist 目录

npm run build
复制代码

将打包生成好的 dist 目录重命名为 admin

Nginx 部署项目

将命名好的 admin 前端项目放到 Nginx 的 html 目录下去

命令行在 Finder 打开 html 目录：

open /usr/local/Cellar/nginx/1.17.8/
复制代码

然后将 admin 拖到 html 中就可以了

修改 Nginx 配置文件

现在我们需要修改一下 Nginx 的配置文件 nginx.conf

配置改动：

• 端口号为 9200
• 服务名称为 localhost
• root目录为 html
• location地址为 /admin
• 处理前台路由 history 模式刷新 404 的问题

http {
   server {
        # 监听的端口号
        listen       9200;

        # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
        server_name  localhost;

        # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;

        # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
        location / {
            try_files $uri $uri/ /index.html;	    
        }
        # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
        location ^~ /admin {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            try_files $uri $uri/ /admin/index.html;
        }
        # 如果你想配置多个项目的话，可以复制上面的，修改一下就可以同时部署多个前端项目了
        # 比如
        # location ^~ /blog {
            # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
            # try_files $uri $uri/ /blog/index.html;
        # }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    include servers/*;
}
复制代码

启动 Nginx 访问项目

配置修改好之后，我们就可以使用 Nginx 的命令来启动 Nginx 服务

cd /usr/local/Cellar/nginx/1.17.8/bin/
nginx -s reload
复制代码

如果没有任何提示，就说明 Nginx 服务重新加载配置成功了

然后我们就可以在浏览器地址栏里访问 http://localhost:9200/admin 了。

---

总结：

Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器。同时也是一个IMAP、POP3、SMTP代理服务器。Nginx可以作为一个HTTP服务器进行网站的发布处理，另外Nginx可以作为反向代理进行负载均衡的实现。本文主要总结了在使用 Nginx 部署前端项目时应该如何配置，同时还可以通过 Nginx 来配置后台服务，下期更精彩哦。

---