前端开发必备技能知识笔记-nginx部署vue项目简易教程

以前都是用IIS部署web项目，但是在很多视频教程中发现用的是nginx部署发布web项目，因此就尝试用nginx发布web项目，以防后面忘记就将步骤记录下来

1、下载nginx

nginx官网下载

解压

2、是否成功验证

点击nginx.exe执行文件

如果输入http://localhost/ 后可以看到Welcome to nginx！的提示就说明成功了

3、部署自己的web项目

首先npm run build打包自己需要部署的vue项目

打包好的部署文件dist文件中有index.html和static文件，就是程序入口和静态文件

删除下载好的nginx文件中html文件夹里面的文件，然后将上面打包好的dist文件里面的index.html和static两个文件加到html文件夹里面

最后进入http://localhost 就可以看到你的项目，这就说明你完成部署了

4、部署失败可能的原因

如果部署失败首先要考虑的就是是不是端口号被占用，localhost默认端口号是:80端口，需要更改端口号试试

进入nginx.conf进行端口的修改

将端口号修改，直到不冲突

---

上面就是通过nginx发布vue项目的建议教程，亲试有用