Nginx项目部署

本篇来总结一下vue项目打包部署到nginx上的流程和注意事项

使用

1.Vue打包

在NPM脚本中找到build，或者在终端控制台输入

npm run build

就可以对vue项目进行打包

在文件目录dist中的文件就是本次打包的文件

2.nginx

简介

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

官网下载

https://nginx.org/

文件目录

下载后解压即可安装完成，下面来介绍一下各个文件夹的作用

• conf 配置文件目录
• html 静态资源文件存放目录(html,css,js)
• logs 日志文件存放目录
• temp 临时文件存放目录
• nginx.exe 可执行文件

使用步骤

在conf目录下，找到nginx.cof文件，可以在其中配置端口号，防止端口号被占用，导致启动失败

如果端口号失败

可以在命令窗中(netstat -ano | findStr 端口号)

netstat -ano 系统中所有的线程

findStr 80 找到端口号为80的应用

在最后一行为PID的值

我们可以在任务管理器中找到对应的PID值，找到应用后，将其关闭即可

---

注意文件中的路径，可以进行路径重写来保证路径正确

我们可以将打包的文件放入html静态资源中，即部署完成