首先需要拥有一台服务器,我用的是阿里云的CentOS。下面就让我们开始吧!

1、部署服务器

一、配置阿里云端口

进入阿里云控制台,安全组 -> 配置规则

centos部署vue项目 vue部署linux_tomcat


进入配置端口,开放了对应的端口,服务器才能访问。

centos部署vue项目 vue部署linux_centos_02

二、安装Xshell和,Xftp

Xshell用来连接服务器,Xftp用来上传或者删除文件,十分的方便。

下面给出下载地址:https://www.netsarang.com/zh/xshell/ 1、用Xshell连接服务器

centos部署vue项目 vue部署linux_centos_03


Xshell服务器连接成功

centos部署vue项目 vue部署linux_centos_04


2、用Xftp连接服务器

centos部署vue项目 vue部署linux_linux_05


Xftp连接成功,传输文件只需要将左边本机的文件拖到右边服务器的文件夹里即可,删除也可以在右侧直接删除。

centos部署vue项目 vue部署linux_centos_06

三、下载并配置JDK和TomCat环境

1、JDK的下载和配置

1、下载JDK

TomCat运行需要java环境,我们首先去Oracle下载jdk

下载地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

centos部署vue项目 vue部署linux_tomcat_07


根据自己的服务器位数选择对应安装包,注意现在下载jdk需要登录Oracle账户,没有的要先去申请。2、安装JDK

打开Xftp,将下载好的压缩文件移动到服务器上,这里我是在/home下面建了usr文件夹,在usr下建了Java和Tomcat两个文件夹用来存放文件。

centos部署vue项目 vue部署linux_linux_08


3、配置JDK

进入存放JDK安装包的文件夹,执行解压命令

tar -xvf 压缩文件名称

centos部署vue项目 vue部署linux_vue.js_09


解压完成,开始配置环境变量

输入命令:vim /etc/profile

i 进入编辑模式

JAVA_HOME=/home/usr/Java/jdk-14.0.2

CLASSPATH=centos部署vue项目 vue部署linux_centos_10PATH:$JAVA_HOME/bin

export PATH JAVA_HOME CLASSPATH

centos部署vue项目 vue部署linux_vue.js_11


退出方法:按esc,然后输入命令 :wq(冒号也要输入)

输入命令 soure /etc/profile 重启配置文件的信息4、测试JDK是否安装成功

输入指令:

java -version

centos部署vue项目 vue部署linux_centos部署vue项目_12


至此,jdk安装成功!

2、TomCat的下载和配置

1、下载TomCat
下载地址:https://tomcat.apache.org/ Tips:tomcat会出现和jdk的版本对应问题,一般是和jdk保持一致。tomcat7对用jdk7版本;tomcat8对用jdk8版本。
下载tomcat的官网,有兼容列表的;
tomcat v7.0-------support-------->Java EE 6 and 6以上
tomcat v8.0-------support-------->Java EE 7 and 7以上
tomcat v9.0-------support-------->Java EE 8 and 8以上

这里我选择Apache9作为演示

centos部署vue项目 vue部署linux_centos部署vue项目_13


选择安装包下载

centos部署vue项目 vue部署linux_vue.js_14


2、安装Tomcat

同JDK方法一样使用Xftp进行安装3、配置Tomcat

进入存放Tomcat安装包的文件夹,执行解压命令:tar -xvf 压缩文件名称

解压完成之后 配置环境变量,输入指令:vim /etc/profile开始配置

centos部署vue项目 vue部署linux_centos_15


CATALINA_HOME=/home/usr/TomCat/apache-tomcat-9.0.37
 CATALINA_BASE=/home/usr/TomCat/apache-tomcat-9.0.37
 export CATALINA_HOME CATALINA_BASE

退出之后输入指令 soure /etc/profile

4、测试Tomcat是否成功安装

进入Tomcat目录下的bin文件,输入./startup.sh运行脚本

centos部署vue项目 vue部署linux_centos部署vue项目_16


进入logs文件夹查询日志

输入指令:

cd logs

cat catalina.out

在浏览器搜索:(服务器的公网ip):8080
出现Tomcat主页

至此,Tomcat安装成功!

5、修改Tomcat端口(在端口被占用的情况下进行)
将端口修改为没有被占用的端口号

进入tomcat下conf文件夹
cd conf
更改server.xml文件
vi server.xml

举个例子:

若8080端口被占用,将这个端口进行修改,这里我修改为9999

centos部署vue项目 vue部署linux_centos部署vue项目_17

centos部署vue项目 vue部署linux_vue.js_18

2、打包Vue文件并上传

打开vscode,在终端执行命令:npm run build进行打包操作。完成之后文件夹会多出一个dist文件,打开Xftp,将dist文件夹下的内容复制到Tomcat/webapps/ROOT文件夹下,替换里面的内容

centos部署vue项目 vue部署linux_vue.js_19


然后我们访问服务器公网IP,http://47.104.92.41:9999/

centos部署vue项目 vue部署linux_linux_20


这样,一个简单的Vue项目就被部署到服务器上了。