在服务器上部署Vue项目
sentOS服务器上安装Nginx
Nginx的安装,参考:https://blog.****.net/wxyjuly/article/details/79443432
首先安装必要的库(nginx 中gzip模块需要 zlib 库,rewrite模块需要 pcre 库,ssl 功能需要openssl库)。
安装gcc gcc-c++
yum install -y gcc gcc-c++
安装PCRE库
cd /software
wget http://jaist.dl.sourceforge.net/project/pcre/pcre/8.33/pcre-8.33.tar.gz
tar -zxvf pcre-8.36.tar.gz
cd pcre-8.36
./configure
make && make install
安装SSL库
cd /software
wget http://www.openssl.org/source/openssl-1.0.1j.tar.gz
tar -zxvf openssl-1.0.1j.tar.gz
cd openssl-1.0.1j
./config
make && make install
安装zlib库存
cd /software
wget http://zlib.net/zlib-1.2.11.tar.gz
tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11.tar.gz
./configure
make && make install
安装Nginx
cd /software
wget http://nginx.org/download/nginx-1.8.0.tar.gz
tar -zxvf nginx-1.8.0.tar.gz
cd nginx-1.8.0
./configure --with-pcre=../pcre-8.39/ --with-zlib=../zlib-1.2.11/ --with-openssl=../openssl-1.0.1j/
显示版本号
此时只能在“/usr/local/nginx/sbin”下执行“./nginx -v”命令,需要设置软链接:
设置软链接
ln -s /usr/local/nginx/sbin/nginx /usr/bin/
此时,可在任意位置访问nginx
重启服务器
当重启服务器时提示:
原因:nginx没有有添加到系统服务,需要手动添加一个
在 /etc/init.d/下创建名为nginx的启动脚本即可,内容如下:
cd /etc/init.c/
vim nginx
#!/bin/bash
#
# chkconfig: - 85 15
# description: Nginx is a World Wide Web server.
# processname: nginx
nginx=/usr/local/nginx/sbin/nginx
conf=/usr/local/nginx/conf/nginx.conf
case $1 in
start)
echo -n "Starting Nginx"
$nginx -c $conf
echo " done"
;;
stop)
echo -n "Stopping Nginx"
killall -9 nginx
echo " done"
;;
test)
$nginx -t -c $conf
;;
reload)
echo -n "Reloading Nginx"
ps auxww | grep nginx | grep master | awk '{print $2}' | xargs kill -HUP
echo " done"
;;
restart)
$0 stop
$0 start
;;
show)
ps -aux|grep nginx
;;
*)
echo -n "Usage: $0 {start|restart|reload|stop|test|show}"
;;
esac
为文件添加可执行权限:
再次输入命令即可:
访问ip,会显示如下界面:
将项目代码放在Nginx的访问目录 “/usr/local/nginx/html” 下即可。
在服务器上安装node,vue-cli3,npm
注:若是在window下,则需要配置环境变量;在Linux下需要设置软连接。否则不能使用相应的命令。
1.在 sentOS 服务器上安装 node
1.切换到你希望安装node的目录:
cd /software
2.使用 wget 命令(从网络上自动下载文件)下载 node。可下载别的版本。
wget https://npm.taobao.org/mirrors/node/v11.7.0/node-v11.7.0-linux-x64.tar.xz
3.解压下载的文件
tar -xvf node-v11.7.0-linux-x64.tar.xz
4.此时使用 node -v 并不能显示node的版本号,因为不能全局使用node命令,需要建立软链接,使其变为全局。类似window下需要配置全局变量。
我们看到 bin 目录 指向的是 user/bin:
软链接:
ln -s /software/node-v11.7.0-linux-x64/bin/node /usr/bin/
ln -s /software/node-v11.7.0-linux-x64/bin/npm /usr/bin/
创建后会指向 /user/bin/node 和 /user/bin/npm。
5.此时再输入 node -v 就会显示版本信息了
2.查看npm的版本信息
3.访问外网时比较慢,安装cnpm 淘宝镜像
创建软链接
4.全局安装 vue-cli
创建软链接:
查看版本信息:
在sentOS上安装 pm2
PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。
npm install -g pm2
创建软链接:
ln -s /software/node-v11.7.0-linux-x64/bin/pm2 /usr/bin/
在sentOS上部署vue项目
1.在阿里云sentOS服务器上配置安全组
注:不配置安全组,则访问不到
买个阿里云服务器,登录,点击“安全组”:
注:
- 22端口是Linux系统下SSH端口,用于远程连接。
- 3389端口是Windows系统用于远程桌面连接的。
在此,需要开放一个80端口:
“安全组”->"管理实例"->"安全组规则"->"添加安全组规则"
注:授权对象 若为0.0.0.0/0 则表示允许或拒绝所有IP的访问。
说明:因为Nginx服务器默认访问的端口为80,我在此没有修改,所以配置的安全组端口为80。可根据自己的配置设置对应的安全组端口。
2.修改vue项目的一些配置
若vue版本是3.0以上的,则在项目的根目录下新建“vue.config.js”文件,配置“publicPath”选项。
打开你的路由配置项,修改base的选项和publicPath一致:
3.将项目放在服务器上
进入写的vue项目中,使用命令“npm run build”将项目打包
打包好后,会在项目中出现“dist”目录,就是需要放在服务器的目录。
将 dist 目录重命名(名称任意,要和你配置的base路径对应),在这我改为“vue-admin”,将"vue-admin"(原dist目录)目录放在服务器的默认访问路径下,我的是“/usr/local/nginx/html”下。