前端项目部署到Nginx服务器

Vue项目部署到Nginx服务器1.1使用编译器打开这个项目除了编译器也可以在控制台中操作在控制台中需要直接定位到前端的目录下把地址栏中的地址改为cmd回车然后输入npm run build也可以进行打包1.打开项目后选择前端的文件夹(编译器:VSCode,WebStorm,Hbuilder X等软件)这里以vscode为例:项目一般都是一整个文件夹选择打开文件夹2.选择项目存放的位置→选择文件夹3.然后就打开了项目的前端文件4.WindowsCtrl ~键盘左上角Esc 下方那个波浪键按一下直接弹出底部终端控制台。这是控制台就会直接定位到你的项目前端文件夹5.然后输入,等待打包完成注意:在前端打包前先使用cd命令把目录切换到前端目录下要不一直默认为整个项目的文件夹下npm run build如果允许npm run build这段命令在控制台中报错需要使用Windows PowerShell以管理员身份运行输入,系统询问是否修改输入y(大小写都可以)回车Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser6.打包完成打包完成后在左侧可以看到有一个dist文件夹前端的项目打包完成后都放在dist文件夹中1.2Nginx的安装和配置nginx:介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。1.下载Nginx,选择相应的版本下载nginxhttps://nginx.org/nginx-1.31.3 pgp下载后的文件扩展名时.tar,这个是Linux系统下载的版本nginx/Windows- 1.31.3 pgp下载后的文件扩展名时.rar,这个时Windows系统下载的版2.下载完成后把Nginx放到一个存英文的目录下进行解压3.然后将前端打包好的文件拷贝到html文件夹内源目录的disk第一次打开nginx中的html文件夹时会有两个html文件可以直接删除然后将源项目disk文件夹的内容拷贝到nginx中的disk4.这样就把前端的项目放到Nginx的服务器里了1.3 启动Nginx1.双击nginx目录下的nginx.exe或者是使用控制台把Nginx启动先切换到nginx的目录下将地址栏的信息改为cmd回车输入start nginx屏幕上会闪一下控制台就证明启动起来了2.在任务管理器中查看Nginx的进程是否存在启动后默认会占用本地的80端口号然后会弹出一个黑色的框闪一下在任务管理器中查看Nginx的进程如果没有出现nginx.exe的进程就回到nginx的根目录下有一个logs的文件夹双击打开,双击error.log文件使用记事本打开查看错误信息根据错误信息修改相应的配置文件config文件夹中的内容。问题解决a.先查看是哪个应用占用了80端口winr打开运行输入cmd回车输入netstat -ano | findStr 80 //出现内容 TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 4 // 4代表的是PIDb.如果遇到是System证明是系统进程就不要更改系统进程更改一下nginx的端口c.在nginx目录下有一个conf文件夹双击nginx.conf文件用记事本打开d.把80端口改为90保存并重新双击nginx.exe并在任务管理器中查看nginx的进程3.访问自己部署在Nginx的前端项目用浏览器访问一下Nginx部署的前端工程如果是80端口直接访问localhost回车如果不是80端口则需要输入localhost:端口号回车就可以访问到自己部署的前端工程