Vue项目部署以及使用Nginx打包运行

前言

前面我们已经学到了项目的搭建那么我们就要开始打包并且在本地部署我们的项目啦

怎么使用cmd命令来进行Vue脚手架的项目搭建-CSDN博客

项目打包

方式一:

我们采取图形化界面来实现,就是右下角的build,对,看那个该死的build,我一上午没运行出来

所以我采取的是cmd界面来实现的Vue项目部署以及使用Nginx打包运行_第1张图片

方式二:

这里我们采取的是cmd界面的形式,这里就是详细的哈哈哈哈

Vue项目部署以及使用Nginx打包运行_第2张图片

我么就可以看到生成的项目包

Vue项目部署以及使用Nginx打包运行_第3张图片

代理服务器

Nginx是一种高性能的HTTP服务器,同时也是一个高效的反向代理服务器。

NGINX - 高级负载均衡器、Web服务器、反向代理 | 弘协网络

我的口头介绍肯定是没有专门的电子书文档详细,打击可以详细的看看这个

但是他说白了还是一个自己的本地软件来实现自己项目的搭建实现

nginx news

进入他的官网,我们去下载

我们看到右边的download点击进入,然后我们选择自己的版本

Vue项目部署以及使用Nginx打包运行_第4张图片

对的就是这个我们开始下载

Vue项目部署以及使用Nginx打包运行_第5张图片

Vue项目部署以及使用Nginx打包运行_第6张图片下载完毕之后我们就开始部署啦

项目部署

对的就是把项目包里面的dist的所有文件复制到Nginx的html文件夹里面

Vue项目部署以及使用Nginx打包运行_第7张图片

我们运行对应的exe文件,然后打开自己的浏览器输入路径就可以啦Vue项目部署以及使用Nginx打包运行_第8张图片

ok。可以看到我们没有任何问题,运行成功

Vue项目部署以及使用Nginx打包运行_第9张图片

项目部署出现的问题

我们打开exe文件之后,如果没有任何反应的话就可以先检查logs文件夹下面的error.log文件日志

端口占用

这个问题很好解决的

我们打开对应的任务管理器,搜索一下这个Nginx是否在对应的终端运行,打开是肯定没有啦,此时我们在cmd命令行输入

netstat -ano |  findStr 80 来查看对应的端口占用情况以及对应的进程

经过检查我们可以看到确实被占用啦,那么我们就需要更换端口配置

我们在对应的conf文件夹下面打开对应的nginx.comf文件进行server的listen监听的端口修改,大家可以自己修改,然后我们再次执行exe文件就可以啦

如果还有后续问题欢迎大家在评论区留言

Vue项目部署以及使用Nginx打包运行_第10张图片


今日分享3

镜花雪月,真真假假,不要相信那些做不到的誓言

Vue项目部署以及使用Nginx打包运行_第11张图片

你可能感兴趣的:(vue.js,前端,javascript)