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项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Ubuntu系统下安装与完全卸载Nginx的步骤
在Linux服务器上管理和部署Web服务,Nginx是一个常见的选择,因为它的高性能和稳定性,这篇文章主要介绍了Ubuntu系统下安装与完全卸载Nginx的相关资料,需要的朋友可以参考下
2025-08-08
nginx和lvs各自的优劣以及适合的使用环境
这篇文章主要介绍了nginx和lvs各自的优劣以及适合的使用环境，帮助大家选择符合需求的服务器，感兴趣的朋友可以了解下
2020-10-10
一次nginx崩溃事件的实战记录
nginx是一个被广泛使用的集群架构组件,我们有必要对它有足够的了解,下面这篇文章主要给大家介绍了一次nginx崩溃事件的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
nginx反向代理配置去除前缀案例教程
这篇文章主要介绍了nginx反向代理配置去除前缀案例教程,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-07-07
Nginx正反向代理与正则表达式详解
Nginx作为一款高性能的开源Web服务器和反向代理工具,凭借其轻量级、高并发处理能力和灵活的模块化设计,已成为现代Web架构的基石,这篇文章主要介绍了Nginx正反向代理与正则表达式详解,需要的朋友可以参考下
2025-05-05
通过Nginx+Tomcat+Redis实现持久会话
这篇文章主要介绍了通过Nginx+Tomcat+Redis实现持久会话的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-11-11
Nginx如何获取自定义请求header头和URL参数详解
这篇文章主要给大家介绍了关于Nginx如何获取自定义请求header头和URL参数的相关资料,本文适用于需要在nginx里获取http请求头信息或者传递的参数进行一些计算和处理的情况,需要的朋友可以参考下
2022-07-07
Nginx反向代理中出现502错误的解决步骤
反向代理是一种服务器代理的方式,它代理了客户端的请求并将请求转发给后端服务器,然后将后端服务器的响应返回给客户端,但经常会遇到502错误,所以本文给大家介绍了Nginx反向代理中出现502错误的解决步骤,需要的朋友可以参考下
2025-03-03
Filebeat 采集 Nginx 日志的方法
这篇文章主要介绍了Filebeat 采集 Nginx 日志的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-10-10
关于Nginx跨域问题及解决方案(CORS)
文章主要介绍了跨域资源共享（CORS）机制及其在现代Web开发中的重要性,通过Nginx,可以简单地解决跨域问题,适合新手学习和应用,文章详细讲解了CORS的基本概念、常见的跨域场景、Nginx如何解决CORS问题,以及如何配置Nginx来处理CORS请求
2025-02-02