VUE如何实现项目上线

102 阅读3分钟

首先我们要明白我们接下来要做什么,这样做的目的是什么。通常我们在写完一个项目之前,要进行项目上线,也就是上传到云端,实现共享的功能。

一.下载Xftp 7和Xshell 7

image.png

下载地址:XSHELL - 下载安装 (sanshiq.com)

Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。Xshell 通过互联网到远程主机的安全连接以及它创新性的设计和特色帮助用户在复杂的网络环境中享受他们的工作。 因为我们的电脑中Windows的命令系统本身是不够强大的,所以需要借助外力来进行控制的。

image.png

下载地址:XFTP - NetSarang Website (xshell.com)

Xftp是一个用于Windows系统平台上的FTP、STFP协议文件传输程序,它能帮助用户安全地在Unix系统和Windows系统上进行快速的文件传输任务,并且它可对文件列表进行可视化展示,更符合Windows用户的使用习惯。

二.服务器

我们所要使用的是腾讯云服务器。

腾讯云新春优惠提前享_腾讯云新春优惠活动-腾讯云 (tencent.com)

通过微信注册绑定,在首页购买一个云服务器,可以购买第一个,新用户30三个月,特别划算。购买完成点击右上角控制台,左上角云产品选择我们要使用的轻量应用服务器,场景选择开发环境以及我们的ip是可以下面看到的

image.png

image.png

image.png

image.png

QQ图片20230223185920.jpg

进行完这两步之后,我们就要开始实质性操作了

QQ图片20230223191936.png

QQ图片20230223192002.png

QQ图片20230223192104.png

QQ图片20230223192108.png

在腾讯云找到ip粘贴到Xshell的主机输入框中进行连接,再输入用户名和密码(Xftp也是如此)。

Linux命令(必须掌握):

ls:展示当前文件夹下的所有文件

pwd:当前路径

mkdir demo(文件夹名) 创建一个文件夹

cd demo 进入到这一文件夹下

touch demo.txt 创建一个demo.txt的文件

vim demo.txt 进入文件后 输入i指令 然后就可以输入你要修改的内容了

按Esc 输入wq修改的文件内容就保存好了

rm -rf tanwei.txt 强制删除(谨慎使用)

rm -rf * 删除当前文件夹下的所有

接下来我们来进行项目上线的具体操作:

//一键安装上面四个依赖:

1.yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

连接上nginx服务器后我们需要发布到/usr/local目录

2.cd ../usr/local

创建文件夹:

3.mkdir nginx

下载tar包:

  1. wget nginx.org/download/ng…

  2. tar -xvf nginx-1.13.7.tar.gz

进入到nginx目录:

6.cd /usr/local/nginx

7.cd nginx-1.13.7

执行命令 考虑到后续安装ssl证书,所以要添加两个模块:

  1. ./configure --with-http_stub_status_module --with-http_ssl_module

执行make命令

9.make

执行make install命令

10.make install

再退回到nginx目录下

11.cd ../nginx

12.cd sbin

  1. ./nginx

到这里我们的上线就完成一大半了,项目上线的前提是要把我们的代码进行打包,所以我们要在项目终端输入npm run build指令来进行打包,我们的项目列表就会多出一个目录dist。

image.png

那么我们就可以将dist目录下的所有文件拖拽到Xftp里nginx的html文件夹面去

image.png

在网站上输入我们的ip就可以实现这我们项目打包上线的操作了。