超详细的Vue项目部署到Linux服务器

首先需要拥有一台服务器，我用的是阿里云的CentOS。下面就让我们开始吧！1、部署服务器一、配置阿里云端口进入阿里云控制台，安全组 -> 配置规则进入配置端口，开放了对应的端口，服务器才能访问。二、安装Xshell和，XftpXshell用来连接服务器，Xftp用来上传或者删除文件，十分的方便。下面给出下载地址：https://www.netsarang.com/zh/xshell/1、用X

蓝_铯

15744人浏览 · 2020-08-24 16:22:58

蓝_铯 · 2020-08-24 16:22:58 发布

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

1、部署服务器

一、配置阿里云端口

进入阿里云控制台，安全组 -> 配置规则
在这里插入图片描述
进入配置端口，开放了对应的端口，服务器才能访问。

二、安装Xshell和，Xftp

Xshell用来连接服务器，Xftp用来上传或者删除文件，十分的方便。
下面给出下载地址：https://www.netsarang.com/zh/xshell/
1、用Xshell连接服务器
在这里插入图片描述
Xshell服务器连接成功

2、用Xftp连接服务器

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

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

1、JDK的下载和配置

1、下载JDK
TomCat运行需要java环境，我们首先去Oracle下载jdk
下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
在这里插入图片描述
根据自己的服务器位数选择对应安装包，注意现在下载jdk需要登录Oracle账户，没有的要先去申请。

2、安装JDK
打开Xftp，将下载好的压缩文件移动到服务器上，这里我是在/home下面建了usr文件夹，在usr下建了Java和Tomcat两个文件夹用来存放文件。
在这里插入图片描述
3、配置JDK
进入存放JDK安装包的文件夹，执行解压命令
tar -xvf 压缩文件名称

解压完成，开始配置环境变量
输入命令：vim /etc/profile
按i 进入编辑模式
JAVA_HOME=/home/usr/Java/jdk-14.0.2
CLASSPATH= $JAVA_HOME/lib/ PATH=$ PATH:$JAVA_HOME/bin
export PATH JAVA_HOME CLASSPATH
在这里插入图片描述
退出方法：按esc，然后输入命令：wq(冒号也要输入)
输入命令 soure /etc/profile 重启配置文件的信息

4、测试JDK是否安装成功
输入指令：
java -version
在这里插入图片描述
至此，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作为演示
在这里插入图片描述
选择安装包下载

2、安装Tomcat
同JDK方法一样使用Xftp进行安装

3、配置Tomcat
进入存放Tomcat安装包的文件夹，执行解压命令:tar -xvf 压缩文件名称
解压完成之后配置环境变量,输入指令:vim /etc/profile开始配置
在这里插入图片描述
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运行脚本
在这里插入图片描述
进入logs文件夹查询日志
输入指令：
cd logs
cat catalina.out

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

至此，Tomcat安装成功！

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

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

举个例子：
若8080端口被占用，将这个端口进行修改，这里我修改为9999
在这里插入图片描述

在这里插入图片描述

2、打包Vue文件并上传

打开vscode，在终端执行命令：npm run build进行打包操作。完成之后文件夹会多出一个dist文件，打开Xftp，将dist文件夹下的内容复制到Tomcat/webapps/ROOT文件夹下，替换里面的内容
在这里插入图片描述
然后我们访问服务器公网IP，http://47.104.92.41:9999/

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

以上内容都是本人自学个人理解，如有不正确的地方，还请各位指正。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^