这里我这边主要介绍下, vue打包后部署到nginx服务器运行
现在前后台分离模式开发越来越受到欢迎, 前端做前端, 后端做后端, 互相不干预, 两者通过接口进行通信传输。不过这样处理的话, 就需要前端人员掌握一些服务器相关知识点, 我再这里简单介绍下。
为什么选Nginx做上传服务器呢? Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器等, 在稳定性、功能集、示例配置文件和低系统资源的消耗方面都非常好, 当然了负载均衡是个不错的选择。
多的就不夸了, 直接上实战
首先呢要准备好一台云服务器, 且必须有root权限
我这边呢是自己买的一台服务器, 腾讯云 1核2G, 带宽1M, 50G云硬盘, Linux/Windows镜像
我个人比较推荐阿里云服务器, 为什么买的腾讯云呢? ...便宜, 新用户以上配置99一年
进入服务器, 我这边选用工具是FinalShell, 既可以用命令也可以在可视化界面操作处理
FinalShell下载/文档地址
一. 先安装PCRE pcre-devel 和Zlib
配置nginx的时候会用到, PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。
命令
yum install -y pcre pcre-devel
我这边已经安装过提示这样
因为nginx 使用 zlib 对 http 包的内容进行 gzip ，所以我们顺便安装 zlib 库。
命令
yum install -y zlib zlib-devel
这两个好了我们就可以继续安装nginx
如果安装的时候有问题, 提示需要需要安装GCC和OpenSSL(很幸运, 我没遇到)可以一并安装
命令
yum install -y zlib zlib-devel
二. 先安装nginx
我们可以去官方网站上下载, 解压安装, 下载后是tar.gz包
Nginx下载地址
当然我们可以用命令下载
命令:
wget -c https://nginx.org/download/nginx-1.14.0.tar.gz
这里我选用1.14.0版本
解压并进入nginx目录
tar -zxvf nginx-1.14.0.tar.gz
cd nginx-1.14.0
使用nginx的默认配置, 编译安装
命令
./configure
make
make install
安装完成之后快速查找nginx路径
命令
whereis nginx
sbin文件夹下面有一个nginx的可执行文件, 运行nginx即可
命令
./nginx
这时候浏览器, 输入服务器IP即可看到
检查nginx是否启动
ps -ef|grep nginx
如果如上图有nginx的进程说明启动好了这个时候如果无法访问nginx页面可以先查看一下你服务器的安全组策略是否有启用80端口
验证你的nginx.conf文件是否是正确的, 文件位置 /usr/local/nginx/conf
命令
./nginx -t
文件位置
三. Vue项目打包放到服务器
config → index.js 打包路径这里留意下
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
vue 打包命令, 打完之后会生成个dist包
npm run build
进入文件夹
vue 打包命令
npm run build
打完之后会生成个dist包, 我们将它压缩放到服务器上
上传命令 在放入文件夹 rz,
rz
解压命令
unzip XXXX.zip
删除命令
rm-rf XXXX.zip
查看当前路径
pwd
放好之后我们进入nginx目录, cd 进入conf文件夹, 设置些参数
之后我么进入sbin文件夹 ./nginx启动即可
停止服务
检查运行情况
ps -ef|grep nginx
杀死进程
kill -QUIT 13980
快速停止
kill -TERM 13980
或者
kill -INT 13980
强制停止
pkill -9 nginx
重启(前提服务已经启动了)
./nginx -s reload