nginx 部署前端vue项目的过程详解

更新时间：2025年11月04日 10:49:52 作者：gis分享者

Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡,本文给大家介绍nginx 部署前端vue项目的过程,感兴趣的朋友跟随小编一起看看吧

一、什么是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有两种方式，一种是使用官方已经编译好的包来安装，一种是使用源码构建安装。

第一种方式参考官方地址https://nginx.org/en/linux_packages.html#stable

第二种方式参考官方地址https://nginx.org/en/docs/install.html中的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

nginx -s reload
浏览器中访问：http://localhost 测试是否部署成功

到此这篇关于nginx 部署前端vue项目的文章就介绍到这了,更多相关nginx 部署vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Nginx服务器下使用rewrite重写url以实现伪静态的示例
这篇文章主要介绍了Nginx服务器下使用rewrite重写url以实现伪静态的示例,这里举了Discuz!和WordPress这两个常用的PHP程序,需要的朋友可以参考下
2015-12-12
Nginx中proxy_pass使用小结
本文详细介绍了Nginx中proxy_pass指令的基本用法、配置示例及高级用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-01-01
Nginx中的Gzip压缩配置介绍
这篇文章主要介绍了Nginx中的Gzip压缩配置介绍,本文先是对这些指令做了讲解,然后给出一个配置示例,需要的朋友可以参考下
2014-12-12
Nginx设置wordpress伪静态的方法示例
伪静态是相对真实静态来讲的，通常我们为了增强搜索引擎的友好面，这篇文章主要介绍了Nginx设置wordpress伪静态的方法示例，非常具有实用价值，需要的朋友可以参考下
2018-09-09
nginx反向代理java项目方式
文章简要介绍了如何使用Nginx作为反向代理来部署Java项目,核心在于配置proxy_pass指令
2024-12-12
Windows下Nginx安装配置教程
这篇文章主要为大家介绍了Windows下Nginx安装配置的详细教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
前端开发用得着的nginx配置(场景)
这篇文章主要介绍了前端开发用得着的nginx配置,前端的工作过程里，本地开发、提供测试环境，总得有个用着顺手的服务器软件，这个场景里nginx很流行，特分享下需要的朋友可以参考下
2014-09-09
HTTP 499 状态码 nginx下 499错误的解决办法
HTTP状态码出现499错误有多种情况,499错误是什么?Nginx 499错误的原因及解决方法,下面跟着脚本之家小编一起学习吧
2016-06-06
Nginx 禁用静态文件缓存的配置方法
禁用缓存可能会导致性能下降,因为每次请求都需要从后端服务器获取文件,因此,你需要根据具体情况权衡利弊并做出决策,这篇文章给大家介绍Nginx 禁用静态文件缓存的方法,感兴趣的朋友一起看看吧
2024-02-02
nginx安装以及配置的详细过程记录
Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,下面这篇文章主要给大家介绍了关于nginx安装以及配置的详细过程,文章将实现的过程介绍的非常详细,需要的朋友可以参考下
2021-09-09