nginx打包部署前端vue项目全过程【保姆级教程】

    🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

目录

一. 打包

1.1 打包命名

1.2 打包命令执行

1.3 如何看是否打包成功

二. 下载nginx打包文件

2.1 解压文件

​编辑 2.2 打开文件

 三 . 部署到nginx 

3.1 打开dist 

3.2 部署到nginx 

四. 启动nginx 

 4.1 启动nginx

4.2 打开项目

五.nginx打包好处【不用看，上面完成了就可以了】 

一. 打包

1.1 打包命名

npm run build

1.2 打包命令执行

上面的打包命令在终端中执行即可，这里主要是vue项目的打包部署全过程

1.3 如何看是否打包成功

多了个dist文件夹就是打包成功了！ 

二. 下载nginx打包文件

可以去官网里面去下载，这是我从官网中下载下来的。

nginx下载教程

2.1 解压文件

如图所示【一定要在全英文路径下，否则会出现莫名其妙的报错】 

 2.2 打开文件

 三 . 部署到nginx 

3.1 打开dist 

我们的文件可能不同，反正复制所有文件即可！

3.2 部署到nginx 

打开html 

然后把刚刚复制的全部粘贴到html中！ 

这样就成功了！ 

四. 启动nginx 

 4.1 启动nginx

点最下面的nginx.exe，会闪一下，就是打开了 

4.2 打开项目

 nginx的端口号默认端口是80

因此随便一个浏览器访问 localhost:80  即可打开部署好的前端项目

4.3 打开localhost:80，如果有页面，那么就是成功了

五.nginx打包好处【不用看，上面完成了就可以了】 

使用 Nginx 打包和部署前端项目有以下几个好处：

  1. 高性能：Nginx 以其高效的事件驱动架构，能够处理大量并发连接，适合高流量网站。

  2. 静态文件服务：Nginx 在处理静态文件（如 HTML、CSS、JavaScript 和图片）方面效率极高，加载速度快。

  3. 反向代理：可以将请求转发到后端服务器，支持负载均衡和跨域请求处理，提升系统的灵活性。

  4. 缓存支持：Nginx 可以配置缓存，提高响应速度，减少服务器负担。

  5. HTTPS 支持：能够轻松配置 SSL/TLS，确保数据的安全传输。

  6. 配置简单：Nginx 的配置文件易于理解和修改，适合快速部署和调整。

  7. 模块化扩展：支持多种模块，可以根据需要添加功能，如压缩、限速等。

  8. 日志记录：提供详尽的访问和错误日志，有助于监控和调试。

  9. 支持 SPA（单页应用）：可以方便地配置路由，使得 SPA 应用在刷新时仍然能正常工作。

  10. 社区支持：广泛使用，拥有丰富的文档和社区资源，便于解决问题。

  11. 负载均衡：Nginx 可以配置为负载均衡器，将请求分发至多个后端服务器，提高应用的可扩展性和可靠性。

  12. 支持 WebSocket：能够处理 WebSocket 连接，适合需要实时通信的应用，如聊天应用或在线游戏。

  13. 流量控制：可以通过配置限流、限速等策略，保护后端服务不被过载。

  14. 自定义错误页面：支持自定义错误页面（如 404、500），提升用户体验。

  15. 跨域资源共享 (CORS)：可以轻松配置 CORS 头，方便与前端进行跨域请求。

  16. 集成 CDN：可以将静态资源通过 CDN 加速，提高全球用户的访问速度。

  17. 便于 CI/CD 集成：与持续集成和持续部署流程兼容，方便自动化更新和部署。

  18. 模块化配置：支持将配置分成多个文件，便于管理和组织复杂的配置。

  19. 动态内容处理：虽然主要用于静态文件，但也可以与其他应用服务器（如 Node.js、PHP、Python）协同工作，处理动态内容。

  20. 安全性增强：可以配置防止常见攻击（如 DDoS 攻击、SQL 注入）的措施，增强整体安全性。

  21. 监控与分析：与各种监控工具（如 Prometheus、Grafana）结合使用，方便对流量和性能进行分析。

  22. 快速恢复：Nginx 的高可用性和故障恢复机制可以确保在服务出现问题时迅速恢复，降低停机时间。

  23. 灵活的重定向：可以轻松实现 URL 重定向和重写，优化 SEO 和用户体验。

  24. 多站点支持：可以在同一台服务器上托管多个网站，通过虚拟主机功能进行管理。

  25. 高效的资源利用：Nginx 的低内存占用使其能够在资源有限的环境中有效运行。

  26. 内容压缩：支持 Gzip 等压缩技术，减小传输文件大小，提高加载速度。

  27. 自动化配置更新：可以通过 API 或脚本自动更新配置，方便与 DevOps 流程集成。

  28. SSL/TLS 终止：Nginx 可以处理 SSL/TLS 加密，减轻后端服务器的负担。

  29. 静态资源版本控制：可以通过文件名中的哈希值管理缓存，确保用户访问的是最新版本的静态资源。

  30. 简单的负载监控：提供基本的请求统计和性能监控功能，方便了解流量情况。

  31. 支持 HTTP/2：可以提升加载速度和性能，改善用户体验。

  32. 环境隔离：可以为不同的应用或环境（如开发、测试和生产）配置不同的 Nginx 实例，保持环境之间的隔离

    🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/885999.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【JavaScript】Bit：组件驱动开发的新时代

【JavaScript】Bit：组件驱动开发的新时代

Bit 是一个现代化的开发工具，帮助开发者通过组件驱动的方式进行软件开发和协作。它旨在解决开发大型系统时的常见挑战，如组件的复用性、独立性和协作性问题。通过 Bit，开发团队可以更加轻松地共享、管理和维护可复用的代码组件，同…
阅读更多...
初识算法 · 双指针(2)

初识算法 · 双指针(2)

目录 前言： 盛最多水的容器 题目解析： 算法原理： 算法编写： 有效三角形的个数 题目解析： 算法原理： 算法编写： 前言： 本文介绍两个题目，盛最多水的容器和有效三…
阅读更多...
Jenkins: fontconfig head is null, check your fonts or fonts configuration；

Jenkins: fontconfig head is null, check your fonts or fonts configuration；

​ 在部署jenkins第一次启动时遇到如下报错： 一大串报错，看的让人脑瓜疼。。。静静地分析一下日志，发现第一行报错信息： fontconfig head is null, check your fonts or fonts configuration。 这是个什么鬼，我也不…
阅读更多...
师生健康信息管理：SpringBoot技术突破

师生健康信息管理：SpringBoot技术突破

第4章 系统设计 4.1 系统体系结构 师生健康信息管理系统的结构图4-1所示： 图4-1 系统结构 登录系统结构图，如图4-2所示： 图4-2 登录结构图 师生健康信息管理系统结构图，如图4-3所示。 图4-3 师生健康信息管理系统结构图 4.2…
阅读更多...
linux文件编程_文件

linux文件编程_文件

1. 文件编程概述 之前在windows中对文件的操作是：打开文档—>编辑文档—>保存文档—>关闭文档 我们的Linux文件编程主要是利用代码对文件进行操作：文件创建、打开、编辑等自动化执行等 在Linux我们要使用编程调用api函数的方式进行文档的编辑…
阅读更多...
数据结构-链表笔记

数据结构-链表笔记

移除节点 203. 移除链表元素 - 力扣（LeetCode） /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListN…
阅读更多...
C++杂项

C++杂项

作业&#xff1a; 将之前实现的顺序表、栈、队列都更改成模板类 顺序表 #include <iostream>using namespace std;template<typename T>class SeqList { private:T *ptr;int size; //总长度int len 0; //当前顺序表实际长度public://初始…
阅读更多...
Vue3.X + SpringBoot小程序 | AI大模型项目 | 饮食陪伴官

Vue3.X + SpringBoot小程序 | AI大模型项目 | 饮食陪伴官

gitee平台源码 github平台源码 饮食陪伴师是一个管理饮食的原生大模型小程序&#xff0c;优势&#xff1a; 精确营养监控&#xff1a;用户记录饮食后&#xff0c;我们会计算出食用的营养成分与分量&#xff0c;并反馈给用户。饮食建议有效&#xff1a;大模型经过我们训练具备大…
阅读更多...
中建材信云智联项目总监张瑞洲受邀为第四届中国项目经理大会演讲嘉宾

中建材信云智联项目总监张瑞洲受邀为第四届中国项目经理大会演讲嘉宾

全国项目经理专业人士年度盛会 中建材信云智联科技有限公司数字化事业部项目总监张瑞洲先生受邀为PMO评论主办的全国项目经理专业人士年度盛会——2024第四届中国项目经理大会演讲嘉宾&#xff0c;演讲议题为“电厂智能安全管控项目范围管理实践分享”。大会将于10月26-27日在北…
阅读更多...
工具介绍---效率高+实用

工具介绍---效率高+实用

Visual Studio Code (VS Code) 功能特点&#xff1a; 智能代码提示&#xff1a;内置的智能代码提示功能可以自动完成函数、变量等的输入&#xff0c;提高代码编写速度。插件丰富&#xff1a;支持成千上万的扩展插件&#xff0c;例如代码片段、主题、Linting等&#xff0c;能够…
阅读更多...
67.【C语言】枚举类型

67.【C语言】枚举类型

1.定义 对于有限的情况,一一列举 如一周有7天,从周一到周日;光学三原色(Red Green Blue) 2.格式 enum 枚举类型名 {//枚举常量 }; 备注:enum为enumeration缩写 3.枚举成员变量的值 #include <stdio.h> enum color {Red,Green,Blue };int main() {printf("%d…
阅读更多...
alpine安装docker踩坑记

alpine安装docker踩坑记

文章目录 前言错误场景正确操作最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;最近使用alpine操作系统上docker遇到了一些错误&#xff0c;尝试解决之后就准备输出一篇博客&#xff0c;帮助有需要的后人能够少踩坑&#xff0c;因为淋过雨所以想给别人撑伞 错误场景 我…
阅读更多...
基于Hive和Hadoop的电信流量分析系统

基于Hive和Hadoop的电信流量分析系统

本项目是一个基于大数据技术的电信流量分析系统&#xff0c;旨在为用户提供全面的通信数据和深入的流量使用分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以 Spark…
阅读更多...
Excel实现省-市-区/县级联

Excel实现省-市-区/县级联

数据准备 准备省份-城市映射数据&#xff0c;如下&#xff1a; 新建sheet页&#xff0c;命名为&#xff1a;省-市数据源&#xff0c;然后准备数据&#xff0c;如下所示&#xff1a; 准备城市-区|县映射数据&#xff0c;如下&#xff1a; 新建sheet页&#xff0c;命名为&#x…
阅读更多...
遗传算法与深度学习实战（15）——差分进化详解与实现

遗传算法与深度学习实战（15）——差分进化详解与实现

遗传算法与深度学习实战&#xff08;15&#xff09;——差分进化详解与实现 0. 前言1. 差分进化1.1 基本原理1.2 差分进化基本流程 2. 使用差分进化逼近复杂和不连续函数小结系列链接 0. 前言 深度学习 (Deep learning, DL) 系统通常可以被简单的视为凸函数逼近器&#xff0c;…
阅读更多...
[Linux]从零开始的网站搭建教程

[Linux]从零开始的网站搭建教程

一、谁适合本次教程 学习Linux已经有一阵子了&#xff0c;相信大家对LInux都有一定的认识。本次教程会教大家如何在Linux中搭建一个自己的网站并且实现内网访问。这里我们会演示在Windows中和在Linux中如何搭建自己的网站。当然&#xff0c;如果你没有Linux的基础&#xff0c;这…
阅读更多...
python画图|自制渐变柱状图

python画图|自制渐变柱状图

在前述学习过程中&#xff0c;我们已经通过官网学习了如何绘制渐变的柱状图及其背景。 掌握一门技能的最佳检验方式就是通过实战&#xff0c;因此&#xff0c;本文尝试做一些渐变设计。 前述学习记录可查看链接&#xff1a; Python画图|渐变背景-CSDN博客 【1】柱状图渐变 …
阅读更多...
ArcGIS共享数据的最佳方法（不丢可视化、标注等各类显示信息一样带）

ArcGIS共享数据的最佳方法（不丢可视化、标注等各类显示信息一样带）

今天我们介绍一下ArcGIS数据共享的几个小妙招 我们时常要把数据发给对方&#xff0c;特别是很多新手朋友要将shp发给对方时只是发送了shp后缀的文件&#xff0c;却把shp的必要组成文件dbf、shx等等给落下了。 还有很多朋友给图层做好了符号化标注&#xff0c;但是数据一发给别…
阅读更多...
详解调用钉钉AI助理消息API发送钉钉消息卡片给指定单聊用户

详解调用钉钉AI助理消息API发送钉钉消息卡片给指定单聊用户

文章目录 前言准备工作1、在钉钉开发者后台创建一个钉钉企业内部应用&#xff1b;2、创建并保存好应用的appKey和appSecret&#xff0c;后面用于获取调用API的请求token&#xff1b;3、了解AI助理主动发送消息API&#xff1a;4、应用中配置好所需权限&#xff1a;4.1、权限点4.…
阅读更多...
OkHttp 详细使用步骤，以及异步请求和同步请求

OkHttp 详细使用步骤，以及异步请求和同步请求

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。 &#x1f60a; 座右铭&#xff1a;不…
阅读更多...
最新文章

Copyright @ 2022~2023