nginx 部署前端vue项目的方法实践

 更新时间:2024年10月28日 09:52:35   作者:gis分享者  
本文主要介绍了Nginx的基本概念及其优点,并详细阐述了如何使用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有两种方式,一种是使用官方已经编译好的包来安装,一种是使用源码构建安装。

第一种方式参考官方地址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前端根据$remote_addr分发方法

    详解nginx前端根据$remote_addr分发方法

    这篇文章主要介绍了详解nginx前端根据$remote_addr分发方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Nginx实现负载均衡的配置步骤

    Nginx实现负载均衡的配置步骤

    Nginx是一个高性能的HTTP和反向代理服务器,它以其稳定性、丰富的功能集、低系统资源消耗和简单的配置而广受欢迎,在大型网站和分布式系统中,Nginx常被用作负载均衡器,本文给大家介绍了Nginx负载均衡的配置步骤,需要的朋友可以参考下
    2024-06-06
  • Linux下Nginx负载均衡多个tomcat配置的方法步骤

    Linux下Nginx负载均衡多个tomcat配置的方法步骤

    这篇文章主要介绍了Linux下Nginx负载均衡多个tomcat配置的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Nginx 限流和流量控制的实现

    Nginx 限流和流量控制的实现

    Nginx通过limit_req和limit_conn模块提供请求次数和并发连接数限制,防止服务器过载,本文就来介绍一下Nginx 限流和流量控制的实现,感兴趣的可以了解一下
    2024-09-09
  • nginx配置ssl实现https访问(小白文)

    nginx配置ssl实现https访问(小白文)

    安全起见,需要将之前的http接口访问变成https访问,所以需要配置SSL证书,本文主要介绍了nginx配置ssl实现https访问,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • 为何要小心Nginx的add_header指令详解

    为何要小心Nginx的add_header指令详解

    这篇文章主要给大家介绍了关于为何说要小心Nginx的add_header指令的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • win10上安装nginx的方法步骤

    win10上安装nginx的方法步骤

    这篇文章主要介绍了win10上安装nginx的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 深入理解Nginx中Server和Location的匹配逻辑

    深入理解Nginx中Server和Location的匹配逻辑

    这篇文章主要介绍了深入理解Nginx中Server和Location的匹配逻辑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • nginx实现tomcat动静分离详解

    nginx实现tomcat动静分离详解

    本篇文章主要介绍了nginx实现tomcat动静分离详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • nginx centos 服务开机启动设置实例详解

    nginx centos 服务开机启动设置实例详解

    这篇文章主要介绍了nginx centos 服务开机启动设置实例详解的相关资料,这里对服务开机启动做了详细的步骤介绍,需要的朋友可以参考下
    2016-11-11

最新评论