如何将Vue项目部署至 nginx

一、准备工作------1.确保安装了开发软件VS Code此处可查阅安装 VS Code教程确保相关插件安装成功2.安装Node.js和创建Vue项目此处可查阅安装创建教程3.成功在VS Code运行一个Vue项目此处可查阅运行教程注意以上均在 Win10环境下进行浏览器为Microsoft EdgeVue2.x二、nginx介绍---------Nginx是一款开源的高性能HTTP服务器和反向代理服务器同时也可以用作邮件代理和负载均衡器。它由Igor Sysoev于2002年开发最初的设计目标是处理高并发连接特别适合静态内容的服务。主要特点1.高性能Nginx能够高效处理数万并发连接适合高流量网站。2.反向代理可以将请求分发到多个后端服务器提高负载均衡能力。3.静态文件服务对静态文件如图片、CSS、JavaScript提供快速响应。4.模块化架构支持多种模块用户可以根据需求扩展功能。5.灵活的配置通过简单易懂的配置文件用户可以快速设置和调整服务。Nginx广泛应用于各类网站和应用中因其性能和稳定性受到开发者和企业的青睐。三、安装nginx---------1.官网下载nginx: download2.网盘下载链接nginx-1.22.0.zip_免费高速下载|百度网盘-分享无限制 (baidu.com) 提取码ku223.安装步骤**只需将该压缩包解压至一个目录即可就安装完成啦**目录结构如下四、开始部署------1.在VS Code使用npm脚本构建要部署的项目找到build点击运行符号会开始构建项目2.构建完成后会发现自己的项目下多了一个dist目录里面就是构建好的项目3.找到红方框里的文件所在位置右键dist点击在文件资源管理器打开4.将dist目录下的所有文件复制到nginx安装目录下的html目录下可以提前删除html目录下的文件确保html目录下是空的再进行复制操作5.修改nginx服务器端口号因为其默认端口号是8080端口已经被我们系统占用所以修改为90也可以修改为没被占用的打开nginx安装目录打开cof目录下的nginx.conf文件双击打开因为我之前用Hbuilder打开过所以图标可能跟你们不一样反正你们认准nginx.conf文件这个文件就行6.打开后修改这里为90然后保存7.启动nginx启动后若是有防火墙点击确认。双击后没反应是正常现象8.找到任务管理器查看是否启动成功可以看到启动成功9.运行部署的项目浏览器输入localhost:90回车可以看到部署成功10.如何关闭nginx在nginx的安装目录进入cmd输入nginx -s quit回车即可关闭nginx以上就是如何让部署项目至nginx的步骤讲解感谢各位看官的观看下期见谢谢~