Vue项目打包上线

Nginx 是一个高性能的开源HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器。它在设计上旨在处理高并发的请求,是一个轻量级、高效能的Web服务器和反向代理服务器,广泛用于提供静态资源、负载均衡、反向代理等功能。

1、下载nginx

2、将压缩包上传至服务器

3、Nginx的安装需要Linux安装相关的几个库,否则配置和编译会出现错误。执行如下命令

bash 复制代码
yum install gcc openssl openssl-devel pcre pcre-devel zlib zlib-devel -y

4、正式安装

4.1 解压下载下来的nginx文件,执行命令:

bash 复制代码
tar -zxvf nginx-1.26.1.tar.gz

4.2 切换至解压后的nginx主目录,执行命令:

bash 复制代码
cd nginx-1.26.1

4.3 在nginx主目录nginx-1.26.1下执行命令:

bash 复制代码
./configure --prefix=/home/azy/nginx
(其中--prefix是指定nginx安装路径)

4.4 执行命令进行编译:

bash 复制代码
make

4.5 执行命令进行安装:

bash 复制代码
make install

5、Nginx操作

5.1 启动Nginx执行命令:

bash 复制代码
/home/azy/nginx/sbin/nginx -c/home/azy/nginx/conf/nginx.conf
(其中-c是指定配置文件)

5.2 检查Nginx是否启动:通过查看进程:

bash 复制代码
ps -ef | grep nginx

5.3 Nginx重启:

bash 复制代码
/home/azy/nginx/sbin/nginx -s reload

5.4 关闭Nginx:

bash 复制代码
kill -QUIT 主pid
或者
kill -TERM 主pid

6、Nginx配置检查(检查Nginx配置文件是否正确):

bash 复制代码
/home/azy/nginx/sbin/nginx -c /home/azy/nginx/conf/nginx.conf -t

7、Nginx部署Vue项目

7.1 项目打包:

7.2 将打包完成的dist文件夹上传到服务器nginx安装后的html文件夹中:

7.3 配置conf/nginx.conf文件,并重启nginx服务:

7.4 使用浏览器访问服务器的ip即可。

相关推荐
少年姜太公30 分钟前
什么?还不知道git cherry pick?
前端·javascript·git
白兰地空瓶2 小时前
🏒 前端 AI 应用实战:用 Vue3 + Coze,把宠物一键变成冰球运动员!
前端·vue.js·coze
Liu.7743 小时前
vue3使用vue3-print-nb打印
前端·javascript·vue.js
松涛和鸣4 小时前
Linux Makefile : From Basic Syntax to Multi-File Project Compilation
linux·运维·服务器·前端·windows·哈希算法
dly_blog4 小时前
Vue 逻辑复用的多种方案对比!
前端·javascript·vue.js
万少4 小时前
HarmonyOS6 接入分享,原来也是三分钟的事情
前端·harmonyos
烛阴4 小时前
C# 正则表达式:量词与锚点——从“.*”到精确匹配
前端·正则表达式·c#
wyzqhhhh5 小时前
京东啊啊啊啊啊
开发语言·前端·javascript
JIngJaneIL5 小时前
基于java+ vue助农电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
q_19132846955 小时前
基于Springboot+MySQL+RuoYi的会议室预约管理系统
java·vue.js·spring boot·后端·mysql·若依·计算机毕业设计