打包部署(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当中的的这个端口监听

然后再重新加载这个项目

相关推荐
万联WANFLOW30 分钟前
异地厂区视频监控远程运维:从组网到安全的实施要点
运维·网络·安全·企业组网·sdwan
十碗饭吃不饱1 小时前
SSH 密钥认证详解:原理、实操、参数、排错与加固
运维·ssh
echoarts1 小时前
服务器连不上?FileZilla 改被动模式就好了
运维·服务器·其他
无言听风雨丶2 小时前
Redis 运维实战与排错
运维·数据库·redis
QXWZ_IA2 小时前
变电站数字孪生巡检的能力分层、数据接入与空间计算边界
运维·服务器·空间计算
miaobinfei3 小时前
docker拉取dify镜像,执行docker compose up -d 报错
运维·docker·容器
女神下凡3 小时前
芯参谋(85):Linux_PPI_NAND_驱动开发指南
linux·运维·arm开发·驱动开发·单片机·嵌入式硬件·设计规范
天远API3 小时前
零信任架构实战:基于天远租凭分期报告构建自动化智慧租房免押分期履约评估网关
运维·人工智能·架构·自动化
我要见SA姐13 小时前
Chrome 扩展安全攻防实录:从权限滥用到供应链投毒
运维·人工智能·python·机器学习·自动化
kobe_OKOK_4 小时前
docker compose命名卷 映射到宿主机的路径
运维·docker·容器