如何将Vue项目部署至 nginx

一、准备工作

1.确保安装了开发软件VS Code(此处可查阅安装 VS Code教程),确保相关插件安装成功

2.安装Node.js和创建Vue项目(此处可查阅安装创建教程)

3.成功在VS Code运行一个Vue项目(此处可查阅运行教程)

注意:以上均在 Win10环境下进行,浏览器为:Microsoft Edge,Vue:2.x

二、nginx介绍

Nginx是一款开源的高性能HTTP服务器和反向代理服务器,同时也可以用作邮件代理和负载均衡器。它由Igor Sysoev于2002年开发,最初的设计目标是处理高并发连接,特别适合静态内容的服务。

主要特点:

  1. 高性能:Nginx能够高效处理数万并发连接,适合高流量网站。
  2. 反向代理:可以将请求分发到多个后端服务器,提高负载均衡能力。
  3. 静态文件服务:对静态文件(如图片、CSS、JavaScript)提供快速响应。
  4. 模块化架构:支持多种模块,用户可以根据需求扩展功能。
  5. 灵活的配置:通过简单易懂的配置文件,用户可以快速设置和调整服务。

Nginx广泛应用于各类网站和应用中,因其性能和稳定性受到开发者和企业的青睐。

三、安装nginx

1.官网下载:

nginx: download

2.网盘下载:

链接:nginx-1.22.0.zip_免费高速下载|百度网盘-分享无限制 (baidu.com)

提取码:ku22

3.安装步骤

**只需将该压缩包解压至一个目录即可,就安装完成啦

**目录结构如下:

四、开始部署

1.在VS Code使用npm脚本,构建要部署的项目,找到build,点击运行符号,会开始构建项目

2.构建完成后,会发现自己的项目下多了一个dist目录,里面就是构建好的项目

3.找到红方框里的文件所在位置,右键dist,点击在文件资源管理器打开

4.将dist 目录下的所有文件复制nginx安装目录 下的html目录下(可以提前删除html目录下的文件,确保html目录下是空的,再进行复制操作)

5.修改nginx服务器端口号,因为其默认端口号是80,80端口已经被我们系统占用,所以修改为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的步骤讲解,感谢各位看官的观看,下期见,谢谢~

相关推荐
崔庆才丨静觅19 分钟前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60611 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了1 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅1 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅2 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment2 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅2 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊2 小时前
jwt介绍
前端
爱敲代码的小鱼2 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax