打包部署(vue前端)(Nginx)

打包

直接双击npm脚本中的 build 即可将项目打包,打包后的文件会出现在 dist 目录中。

部署

  • Nginx

介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用。

官网:https://nginx.org/

  • 部署

打包完成之后,就可以将打包后的项目,部署到 nginx 服务器上了,记得将nginx解压到一个没有中文不带空格的目录中 。

然后直接将 dist 目录中的内容,拷贝到nginx的解压目录中的 html 中即可 (html目录下原有的两个文件, 可以直接删除)。

然后,在nginx服务器的核心配置文件 conf/nginx 中,在 http 配置块里面 添加如下反向代理的配置:

然后就可以双击 nginx.exe 启动项目了。 访问 http://localhost

Nginx默认占用80端口号,如果80端口号被占用,可以在nginx.conf中修改端口号。(netstat --ano | findStr 80)

Nginx服务器启动、重载、停止的相关命令:

  • 启动:nginx.exe

  • 重载:nginx.exe -s reload

  • 停止:nginx.exe -s stop

打包部署打包的 在vue工程中运行一个脚本一般是build vite build运行这个脚本然后他就会对项目进行打包打包后的文件,他会出现在dist这个目录当中
然后我们将它部署在nginx服务器当中

首先去官网下载对应的nginx下载之后

将你所有打包的这个文件放在nginx服务器这个HTML当中

双击nginx这个文件即可

它默认占用的是80端口号

然后,在nginx服务器的核心配置文件 conf/nginx

http 配置块里面 添加如下反向代理的配置:

因为我们在vue打包的时候主要打包的是源代码src,项目的配置文件不会打包的对应的源代码所以他是无法连接后端的服务器这里我们要重新写nginx.conf当中的的这个端口监听

然后再重新加载这个项目

相关推荐
Leinwin6 小时前
OpenClaw 多 Agent 协作框架的并发限制与企业化规避方案痛点直击
java·运维·数据库
2401_865382507 小时前
信息化项目运维与运营的区别
运维·运营·信息化项目·政务信息化
漠北的哈士奇7 小时前
VMware Workstation导入ova文件时出现闪退但是没有报错信息
运维·vmware·虚拟机·闪退·ova
如意.7597 小时前
【Linux开发工具实战】Git、GDB与CGDB从入门到精通
linux·运维·git
运维小欣7 小时前
智能体选型实战指南
运维·人工智能
yy55277 小时前
Nginx 性能优化与监控
运维·nginx·性能优化
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ8 小时前
Linux 查询某进程文件所在路径 命令
linux·运维·服务器
05大叔10 小时前
网络基础知识 域名,JSON格式,AI基础
运维·服务器·网络
安当加密10 小时前
无需改 PAM!轻量级 RADIUS + ASP身份认证系统 实现 Linux 登录双因子认证
linux·运维·服务器
dashizhi201510 小时前
服务器共享禁止保存到本地磁盘、共享文件禁止另存为本地磁盘、移动硬盘等
运维·网络·stm32·安全·电脑