前端vue项目——打包部署(nginx中部署静态资源)

1、当前的开发方式

前端人员开发前端,后端人员开发后端的java工程,最终要将开发完毕的前端工程和后端工程分开部署在对应的服务器上(前端流行的nginx)

2、打包

(1)原理

(2)

(3)打包完成后可以看到出来一个目录dist

(4)

(5)打包后的文件

(之后就要将打包后的这些文件部署在nginx服务器上)

3、部署

(1)这次我学习的nginx里面的部署前端的静态资源

(2)nginx官网nginx newsicon-default.png?t=N7T8https://nginx.org/

(3)下载当前稳定版

(4)介绍安装解压后的nginx所有的目录

  • conf目录:保存nginx的配置文件
  • html目录:存放静态资源文件的,也就是部署静态资源,比如HTML文件
  • logs目录:存放的是nginx运行时所产生的一些日志文件
  • nginx.exe:nginx的可执行文件,启动它就要用到

4、开始部署操作

(1)

(可以把html目录里默认存在的2个html文件删除,然后将刚刚上面的打包的全部文件复制进去)

(2)启动nginx

(注意nginx启动时,会占用本机的端口80)

(3)如果发现没有启动成功,就要查找是否有其它的应用占用端口号80,如果是系统占用,就只能修改nginx让其启动时占用其它端口号

  • 解决:查看其logs目录查看启动失败原因,然后再在命令行查找谁占用了80端口?

  • 去conf目录下找到nginx.conf核心文件

  • 找到36行,修改默认端口号为90

4、在任务管理器查看是否有nginx进程,若有,就可以去浏览器访问nginx部署的前端工程

  • 回车访问到之前打包好的项目(这样就完成了)

  • 最后注意

5、nginx还可以完成其它的操作(后面学习)

 

nginx完成反向代理服务器、如何实训负载均衡等等

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java实现七牛云内容审核功能,文本、图片和视频的内容审核(鉴黄、鉴暴恐、敏感人物)

目录 1、七牛云内容审核介绍 2、查看内容审核官方文档 2.1、文本内容审核 2.1.1、文本内容审核的请求示例 2.1.2、文本内容审核的返回示例 2.2、图片内容审核 2.2.1、请求参数 2.2.2、返回参数 2.3、视频内容审核 3、代码实现 3.1、前期代码准备 3.2、文本内容审核…

Scrapy框架进行数据采集详细实现

摘要 本项目是python课程的课程项目,在简要学习完python和爬虫相关的Scrapy框架后,基于这两者的运用最终完成了对于北京链家网站新房页面的信息进行爬取,并将爬取的数据存放于excel之中,可使用excel或者wps进行查看。 1 引言 1…

HYDRUS2D/3D模型技术教程

原文链接:HYDRUS2D/3D模型技术教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247612514&idx6&snadf080ddb3394d2f758fc269fa6ce9dc&chksmfa827985cdf5f093af1410f151e11fb6d4b39e7533f401624dc2a2375bdcc74b4b0f6160c58b&token1585…

论文分享 | Fuzz4All: 基于大语言模型的通用模糊测试

大语言模型是当前最受关注的研究热点,基于其生成和理解能力,对现有领域在提升性能和效果上做更多尝试。分享一篇发表于2024年ICSE会议的论文Fuzz4All,它组合多个大语言模型以非常轻量且黑盒的方式,实现了一种跨语言和软件的通用模…

适合所有人的生成式人工智能-学习先导课

欢迎来到为所有人提供的生成式人工智能课(generative AI )。自ChatGPT发布以来,人工智能特别是生成式人工智能引起了许多个人、企业和政府的关注。 这是一项非常颠覆性的技术,已经在改变许多人的学习和工作方式。许多开发者认为生成式AI将使许多人得以赋…

[240812] X-CMD 发布 v0.4.5:更新 gtb、cd、chat、hashdir 模块功能

目录 📃Changelog✨ gtb✨ cd✨ chat✨ hashdir 📃Changelog ✨ gtb 调整了 fzf 预览窗口中书籍文本的显示效果,通过识别文本中的特殊字符、日期、章节标题等信息,为其赋予不同的颜色。 ✨ cd cd 模块新增功能:在找…

RS®ZN-Z8x 开关矩阵

R&SZN-Z8x 开关矩阵 专为多端口矢量网络分析仪测量而设计 R&SZN-Z8x 开关矩阵经过优化设计,专门用于罗德与施瓦茨的矢量网络分析仪。这款经济高效的多方位解决方案可用于多端口设备或多个设备的简单和复杂的测量任务。开关矩阵支持宽频率范围&#xff0…

【论文阅读】YOLOv10: Real-Time End-to-End Object Detection

题目:YOLOv10: Real-Time End-to-End Object Detection 作者:Ao Wang Hui Chen∗ Lihao Liu Kai Chen Zijia Lin Jungong Han Guiguang Ding∗ 清华大学的 motivation: 作者觉得YOLO系列的NMS和某些结构非常的耗时,提出NMS-free和一些列高效…

Qt编译配置OpenCV+opencv_contrib(使用cmake)

本文使用环境 OpenCV: 4.7.0 cmake: 3.30.2 Qt: 5.12.1一、配置环境变量 安装好OpenCV、Qt、cmake后,应配置好一下环境变量: 二、编译OpenCV 打开cmake,编译的源码路径选择opencv文件夹中的sources目录,在opencv文件夹下新建一…

视频汇聚平台智能边缘分析一体机分析平台摄像头异常位移算法识别检测

智能边缘分析一体机在摄像头异常位移检测方面扮演着关键角色,它利用先进的图像处理技术和机器学习算法来实时监测摄像头状态,判断是否发生了非预期的位移。下面是智能边缘分析一体机如何检测摄像头异常位移的详细步骤: 1. 图像帧对比&#x…

SpringBoot中生成条形码的方案实战

​ 博客主页: 南来_北往 系列专栏:Spring Boot实战 ZXing库介绍 ZXing库是一个用于解析和生成多种格式的一维和二维条形码的开源Java库。 ZXing(“zebra crossing”的缩写)库提供了多种条形码格式的支持,包括但不限于QR码、…

Vue3 el-tabs 切换记录选项卡,离开前提示

最近做了一个项目,tabs选项卡 需要在离开当前的选中的项时进行提示并且当取消时定位原位置。 看效果图 当我进行编辑时 触发编辑 但是没有进行保存即提示信息。取消后返回原tabs ,否则确认后进入下个tab。 上代码 tab 一般默认会有一个值,一把是第一…

经典算法题总结:二叉树篇

二叉树解题的思维模式分两类: 是否可以通过遍历一遍二叉树得到答案?如果可以,用一个 traverse 函数配合外部变量来实现,这叫「遍历」的思维模式。是否可以定义一个递归函数,通过子问题(子树)的…

如何平衡冷数据(历史库)的成本与性能?| OceanBase应用实践

随着数据量的迅猛增长,企业和组织在数据库管理方面遭遇的挑战愈发凸显。数据库性能逐渐下滑、存储成本节节攀升,以及数据运维复杂性的增加,这些挑战使得DBA和开发者在数据管理上面临更大的压力。 为了应对这些挑战,对数据生命周期…

Jeecgboot3.6.3的vue3版本的一种flowable动态增加一个用户任务节点的方法(三)后端代码实现

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。 这部分主要讲后端实现部分 1、增加一个AddTaskVo 类型,提供新增任务需要的数据结构 import io.swagger.annotations.ApiModel; import io.swagger.annotations.ApiModelProperty; import lombok.D…

C#使用Puppeteer

Puppeteer Puppeteer是一个Node.js库,它提供了高级API来通过DevTools协议(Chrome DevTools Protocol https://devtools.chrome.com)控制Chrome或Chromium。 Puppeteer默认情况下无头运行(headless)。 可以配置为运行完整的Chrome或Chromium,运行效果如…

spring02-springbean生命周期(实例化过程)

【README】 本文总结自《spring揭秘》,作者王福强,非常棒的一本书,墙裂推荐; spring容器根据配置元素组装可用系统分2个阶段,包括spring容器启动, springbean实例化阶段; 本文详细分析springbe…

单播---广播---组播

单播 单播(Unicast)是一种网络通信方式,其中数据包被发送到特定的网络接口。与广播(Broadcast)不同,单播只将数据包发送到目标地址指定的单个接收者。 单播的工作原理: 源地址:发…

DATAX自定义KafkaWriter

因为datax目前不支持写入数据到kafka中,因此本文主要介绍如何基于DataX自定义KafkaWriter,用来同步数据到kafka中。本文偏向实战,datax插件开发理论宝典请参考官方文档: https://github.com/alibaba/DataX/blob/master/dataxPlug…

240810-Gradio通过HTML组件打开本地文件+防止网页跳转到about:blank

A. 最终效果 B. 可通过鼠标点击打开文件,但会跳转到about:blank import gradio as gr import subprocessdef open_pptx():pptx_path /Users/liuguokai/Downloads/240528-工业大模型1.pptxtry:subprocess.Popen([open, pptx_path])return "PPTX file opened s…