发布上线
一.发布上线的基础和安装
首先我们要了解的一个地方是发布上线是针对于执行完npm run build后dist文件下面所生成的内容。
所谓的项目上线，不管是vue还是react，都会上线到Linux服务器上面,然后我们还需要在Linux上面部署一个nginx静态的服务器，在把dist目录下的文件传输到Linux下的nginx服务器上面，这样的话才可以被外网所访问到.
我们所需要下载两个必备的东西分别是xshell和xftp,下载链接如下：
注意以上的软件下载均选择上方导航栏的所有下载里面的家庭/学校免费即可 ，mac笔记本电脑的话不需要下载xshell
二.必须掌握的linux命令
| 指令 | 所代表的含义 |
|---|---|
| ls | 展示当前文件下面的所有文件 |
| pwd | 代表当前路径 |
| cd+文件名称 | 进入到该文件名称所在的地方 |
| touch+文件名称.txt | 创建一个以.txt结尾的文件 |
| rm -rf 文件名称.txt | 强制删除 谨慎使用 |
| rm -rf | 删除当前文件夹下的所有 |
| mkdir+文件名 | 创建一个文件夹名字随便起(不能是汉字) |
| vim+文件名称.txt | 进入文件后按住i键 输入要修改的内容 按Esc键盘 输入wq 就可以实现将修改的文件保存成功 |
三.如何拥有一个自己的服务器呢？
比较推荐腾讯云服务器创建属于个人的服务器
注册一个免费的服务器步骤如下：
- 点击控制台进行微信扫码登录
- 点击左上角云产品里面的轻量应用服务器
- 第一次登录的用户可以免费注册一个月，有一个月的试用机会
- 微信小程序扫码识别人脸验证
- 通过以后就可以享有免费试用的机会支付0元
- 登录成功之后可以点击左下角更多处进行密码的重置
四.进行发布上线的流程
- 首先一键安装四个依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
-
连接上nginx服务器以后一般是在/root文件目录下，但我们的nginx需要发布到/usr/local文件夹下面 ，因为/root和/usr是同级目录使用cd ../usr/local
-
mkdir nginx 创建一个文件夹
-
cd nginx
-
下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz
- 执行以下命令
//进入nginx目录
cd /usr/local/nginx
//进入目录
cd nginx-1.13.7
//执行命令 考虑到后续安装ssl证书 添加两个模块
./configure --with-http_stub_status_module --with-http_ssl_module
//执行make命令
make
//执行make install命令
make install
-
cd ../ 退到nginx目录下
-
cd sbin 进入sbin
-
./nginx
-
npm run build 打包我们的项目
-
通过xftp 把dist目录下的文件直接拖拽到 nginx 下的html文件夹下，覆盖原文件即可，刷新页面即
最后逐层找到文件夹找到html文件 将打包好的左侧dist拉到右侧html文件夹里面 在地址栏输入自己的服务器ip看是出现h欢迎来到nginx成功显示该项目的页面就是成功发布上线啦，可以将自己的ip地址转发给其他人进行测试成功了就是完成了发布上线！！！
