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

相关推荐
Ticnix几秒前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户2215204427800几秒前
new、原型和原型链浅析
前端·javascript
阿星做前端几秒前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧几秒前
Promise 的使用
前端·javascript
NBtab18 分钟前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码30 分钟前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
用户51681661458411 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
libraG1 小时前
Jenkins打包问题
前端·npm·jenkins
前端康师傅1 小时前
JavaScript 作用域
前端·javascript