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即可。

相关推荐
霍格沃兹_测试3 分钟前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
用户280038329084010 分钟前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js
toooooop812 分钟前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_18 分钟前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy20 分钟前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全26 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101229 分钟前
[前端]1.html基础
前端·笔记·学习·html
白水清风37 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy39 分钟前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全1 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3