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 实例，保持环境之间的隔离

---

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

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

💎擅长领域：前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！