1.编译打包

代码编写完毕后，在终端输入

vue ui

随后就会在项目中生成dist文件夹

有的项目经过一些配置后，结构有所不同，但没有影响。

2.准备部署

将dist文件夹中的所有内容（不包括dist文件夹）全部移动到相应位置。

而部署的方式有两种，我们重点介绍第二种。

2.1.跟随SpringBoot项目一同部署

如果后端为SpringBoot项目，希望与后端一并运行，

此时在resources目录中创建static文件夹，将dist文件夹中的所有内容复制过去

随后编译成jar包即可，详情请移步05.SpringBoot项目部署到linux服务器

注意：如果pom.xml修改了中的，需要检查是否有将resources文件夹加入其中。如果不在其中，MAVEN打包时就不会将resources文件夹打包进去，自然前端也就没有办法被编译进jar包了。

2.2.在nginx上部署

2.2.1.安装nginx

如果尚未在linux服务器上安装nginx，请移步07.linux服务器安装nginx

我的nginx安装目录是/usr/local/nginx。

2.2.2.修改配置文件

首先进入安装目录下的conf文件夹，打开nginx.conf

在http { }中，加入下方内容，并修改其中的listen、server_name、root

server {
        listen       8080;									 # 前端项目端口号
        server_name  name;			 						 # 前端项目名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /vue-2021/name/;						# 前端项目所在位置
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

2.2.3.将项目移动到root对应的文件夹

创建root对应的文件夹（如上，我的是/Vue-2021/name）

将dist文件夹中的所有内容移动到其中

2.2.4.启动/重启nginx以开启项目

先进入到nginx安装目录下的sbin目录中：

cd /usr/local/nginx/sbin

随后输入下方指令启动/重启nginx(注：输入后不会有任何反馈)

# 启动nginx
./nginx

# 重启nginx
./nginx -s reload

2.2.5.服务器配置安全组(防火墙)

如果是阿里云服务器，则需要配置安全组；如果是腾讯云，则是配置防火墙。开放前端项目对应的端口，并允许所有人访问。

详情请移步01.服务器购买与基本配置

2.2.6.访问

一切准备就绪后，在浏览器输入http://服务器ip:端口号，即可访问到你的前端项目

一、所需软件

Xshell软件，Xshell 是一个强大的安全终端模拟软件，它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。
从国内网搜到的一般是需要付费的版本，可以从国外网址获得free-for-home-school版本。

• 网址：https://www.xshell.com/zh/free-for-home-school/

二、软件安装

管理员身份运行，点“下一步”

接受协议，点“下一步”

选择好安装文件夹，点“下一步”

设置好用户名，再点“下一步”

点击“安装”进行安装

三、Xshell远程连接Linux公网

查看 Linux服务器的 IP 地址
使用命令：

ifconfig

如上图位置所示的IP即为 Linux 端的 IP
接下来检测当前Windows主机是否可以和Linux端 ping 通：
打开主机cmd 进行和Linux端进行ping…

当前显示是可以ping 通的

点击新建

在新建对话框中如下填写好对应的内容，其中名称可以自己随便取，协议要选SSH，主机要填前面获取到的Linux服务器的 IP 地址，端口号要填 22。然后点 “确定”

上面点完确定后弹出如下的对话框，可以看到新建的对话。然后点击“关闭”即可。

接下来可以看到主界面，双击“所有对话”中的这个对话项进行和Linux服务器连接

由于这这是第一次连接，会出现如下的对话框，若选择 “一次性接受” 则以后连接还会继续输入用户名和密码，若选择 “ 接受并保存” 则只需输入一次即可，之后不用重复输入。这里按情况进行选择即可

我这里选择 “一次性接受”，输入Linux端的用户名，点 “确定”

然后输入Linux端的密码，点 “确定”

如下则连接并登入成功

然后测试一下是否可以操控远程的服务端，如下查看一下Linux端的根目录情况🤔

接下来就可以远程的对已知的Linux服务端进行命令操控了😆

01.SSH介绍

ssh是专门为远程登陆提供安全的协议，SSH的默认端口号为22

终端命令组成：

ssh [-p port] user@remote

port是SSH 的端口号，默认值22

user指的是服务器中的用户名

remote指的是服务器的IP地址

注意：

SSH终端命令只能在Linux或者UNIX系统下使用，Windows下需要另行安装putty或者XShell。

02.在Kali下远程登陆Linux服务器

1）获得服务器IP地址

在服务器终端窗口下，使用ifconfig查看IP地址

 2）使用Kali远程登陆

终端命令

ssh [-p port] user@remote

 输入服务器中www用户的密码就可以登陆，密码输入过程中不显示在终端界面上。

 退出，输入exit

 03.在Windows下登陆Linux服务器

 1）下载putty

官方网址Download PuTTY: latest release (0.76)

下载下来是个可执行文件，双击就可以使用。

2）使用putty远程登陆

输入服务器IP地址，点击Open

 提示输入用户名

 输入用户密码， 如果出现ACCESS DENIED,多试几次

最后退出，输入exit

以上分别总结了在Linux系统和Windows系统下登陆Linux服务器的方法