如何将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的步骤讲解,感谢各位看官的观看,下期见,谢谢~

相关推荐
optimistic_chen13 小时前
【Vue3入门】Pinia 状态管理 和 ElementPlus组件库
前端·javascript·vue.js·elementui·pinia·组件
酉鬼女又兒13 小时前
零基础入门前端JavaScript 核心语法:var/let/const、箭头函数与 setTimeout 循环陷阱全解析(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·蓝桥杯
Bling_Bling_113 小时前
【无标题】
前端·网络协议
We་ct13 小时前
React Diff & Key 核心解析
开发语言·前端·javascript·react.js·前端框架·reactjs·diff
哥本哈士奇13 小时前
Vue 3 快速入门:从零搭建前后端 CRUD 应用
前端·javascript·vue.js
biubiubiu070613 小时前
Agent 是如何拥有“手脚”的(ReAct 运行流程)
开发语言·前端·javascript
摸鱼的春哥13 小时前
Agent教程21:知识图谱🕸,让AI🤖学会联想
前端·javascript·后端
SuperEugene13 小时前
Vue3 组件拆分实战规范:页面 / 业务 / 基础组件边界清晰化,高内聚低耦合落地指南|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
泯泷13 小时前
阶段二:为什么先设计指令集,编译器和运行时才能稳定对齐?
前端·javascript·架构
Dxy123931021613 小时前
HTML常用布局详解:从基础到进阶的网页结构指南
前端·html