项目怎么打包上线?

303 阅读2分钟

打包前的准备工作

在前端的很多小伙伴当我们项目写完了然后将项目进行打包上线不知道该如何进行打包上线 那么今天来和我一起来学习一下吧! 首先我们先下两的软件 第一个要下载的是Xshell7 以下是下载链接

点击下载

下载好之后

然后我们下载第二个工具叫 Xftp 7

点击下载

接着我们把服务器弄了本人用的是腾讯的服务器

[腾讯云](腾讯云 产业智变·云启未来 - 腾讯 (tencent.com))

进入之后按照上面的提示我们把账号注册了以及服务器的购买 这里我就不多介绍了~

服务器一般新人都有免费体验一个月的哦~

当我们把这些准备工作都做好之后然后让我们来完成一下打包上线的任务吧!

下面是关键请听好

上线中期

首先我们用这个将我们买的服务器连接上 image.png 连接好之后首先我们对Xshell7命令的了解一下下面连接就是我给大家找的一些常用的命令

命令大全

连接上后我们首先我们先在上面下载依赖

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

然后按照步骤一次执行

  1. 连上nginx服务器以后我们一般再/root目录下,但我们的nginx需要发布到/usr/local文件夹下
  2. 因为/root目录和/usr是同级目录 cd ../usr/local
  3. mkdir nginx 创建一个文件夹
  4. cd nginx
  5. 执行这条命令将tarb下载下来
 wget http://nginx.org/download/nginx-1.13.7.tar.gz

6.然后进行解压

  tar -xvf nginx-1.13.7.tar.gz
  1. cd ../ 退到nginx目录下
  2. cd sbin 进入sbin
  3. ./nginx

当我们这些步骤执行完毕我们就可以启动Xftp7了 打开应用 按照红色箭头依次填写

3.png

然后当这个连接好之后我们就可以把要上线的文件拖到这里面来了!

打包后期

然后我们将写好的项目进行先打包运行

npm run build

打包好他会给我们生成一个dist目录

A(6J%N)Z(I`J%FDY%{}DX4C.png

将打包好的文件的dist目录下的所有文件都拖到我们刚刚用命令建的文件

6.png 然后进行一个覆盖 上传好之后然后我们把服务器的ip域名复制到浏览器地址栏中 接着你会看到你刚刚项目中写到的效果都会在这个浏览器显示并且将ip域名发给别人别也能访问到 怎么样?是不是很好玩!快来和你的小伙伴一起来实现一下吧!!!