如何通过 nginx 部署前端vue项目？

本笔记主要为大家讲解如何使用 Nginx 部署前端 Vue 项目的步骤，主要包括安装 Nginx、打包 Vue 项目和配置 Nginx 三个步骤，感兴趣的可以了解一下。

一、什么是 nginx？

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

• 支持海量高并发：采用 IO 多路复用 epoll。官方测试 Nginx 能够支持 5 万并发链接，实际生产环境中可以支撑 2-4 万并发连接数；
• 内存消耗少；
• 可商业化；
• 配置文件简单 除了这些优点还有很多，比如反向代理功能，灰度发布，负载均衡功能等。

二、nginx 部署前端 vue 项目步骤

2.1 安装 nginx

2.1.1 windows 环境安装

到 nginx 官方下载系统相关的 nginx 版本安装

启动命令：

cd F:\nginx-1.19.4
start nginx

2.1.2 linux 环境安装

通常情况下很少使用 windows 来作为 nginx 的服务器，一般使用 linux。对于 linux 安装 nginx 有两种方式，一种是使用官方已经编译好的包来安装，一种是使用源码构建安装。

第一种方式参考官方地址，第二种方式参考官方地址中的 Building from Sources 片段，这种实际上就是下一个 tar.gz 包仍到 linux 服务去自己编译。

在 linux 服务上和 window 环境上使用 nginx 部署 vue 项目并没有太大差异，把构建好的 vue 项目 dist 上传到 linux 服务上，通用修改 nginx 服务器中的 root 来指向 dist 就 ok 了，然后使用：

# centos 7
systemctl restart nginx.service
# centos 6
service nginx restart
# 或者是平滑重启
service nginx reload

2.2 打包 vue 项目

执行命令：

npm run build

2.3 配置 nginx

修改 nginx 配置文件，配置文件为 conf 下的 nginx.conf，修改 nginx.conf 中的 server 配置片段：

server {
        listen       80;#默认端口是 80，如果端口没被占用可以不用修改
        server_name  localhost;
        root        E:/vue_project/my_project/dist;#vue 项目的打包后的 dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router 否则会出现 vue 的路由在 nginx 中刷新出现 404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要 rewrite 到 index.html 中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }

完成 nginx 配置后重新加载配置文件

nginx -s reload

浏览器中访问：http://localhost 测试是否部署成功。

以上就是关于 nginx 部署前端 vue 项目的方法实践的文章，更多相关 nginx 部署前端 vue 项目内容请搜索码云笔记以前的文章或继续浏览下面的相关文章希望大家以后多多支持码云笔记！

以上关于如何通过 nginx 部署前端vue项目？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。