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

相关推荐
你的人类朋友24 分钟前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia30 分钟前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵32 分钟前
JavaScript 空对象检测
javascript
前端太佬34 分钟前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia36 分钟前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
艾克马斯奎普特40 分钟前
Vue.js 3 渐进式实现之响应式系统——第三节:建立副作用函数与被操作字段之间的联系
javascript·vue.js
xRainco41 分钟前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊42 分钟前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil44 分钟前
CSS专题之外边距重叠
前端·css
hepherd1 小时前
Flask学习笔记 - 表单
前端·flask