发布上线

128 阅读2分钟

项目上线

vue项目上线的文件就是执行完 npm run build 后生成的dist文件下的内容

我们项目上线,不管是vue还是react,我们都会上线到Linux服务器上,我们需要再Linux上部署一个nginx静态服务器,这样我们把dist目录下的的文件,传输到linux下的nginx服务器上,才能够被外网访问到。

下载软件

image.png

image.png

xshell常用命令

  1. ls --列出当前目录下所有文件名
  2. mkdir XX --建立目录
  3. cd ../ --进入跟目录下
  4. touch a.html --在当前目录下嵌套建立指定目录(要带上当前目录)
  5. pwd --当前路径
  6. vi file1 --编辑file1文件内容
  7. :w --保存
  8. cd ../.. --切换到上级两级目录

如何拥有自己的服务器

服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器。自从云计算的发展,云服务器搭建就成为很多人所考虑的问题,有的有能力的公司,便会选择自己搭建云服务器,这样对于公司来说也更加灵活,很多人觉得搭建自己云服务器比较难,其实也没有那么复杂。那么下面就由新网小编和大家讲一讲怎么搭建云服务器都有哪些步骤.

  1. 进入腾讯云服务器
  2. 按照购买步骤进行操作和实名认证

注意事项

image.png 3. 操作完之后,进入自己的服务器中,就会看到自己的服务器

image.png

发布上线过程

  1. 首先要在Xshell进行操作

image.png

  1. 连上nginx服务器以后我们一般再/root目录下,但我们的nginx需要发布到/usr/local文件夹下
  2. 因为/root目录和/usr是同级目录 cd ../usr/local
  3. mkdir nginx 创建一个文件夹
  4. cd nginx
  5. //下载tar包
  6. wget nginx.org/download/ng…
  7. tar -xvf nginx-1.13.7.tar.gz
  8. 进入nginx目录 cd/usr/local/nginx
  9. 进入目录 cd nginx-1.13.7
  10. 执行命令 ./configure --with-http_stub_status_module --with-http_ssl_module
  11. 执行make命令 make
  12. 执行make install命令 make install
  13. cd ../ 退到nginx目录下
  14. cd sbin 进入sbin
  15. ./nginx

image.png

将代码中的dist文件覆盖之前文件

  1. npm run build 打包我们的项目
  2. 通过xftp 把dist目录下的文件直接拖拽到 nginx 下的html文件夹下,覆盖原文件即可,刷新页面即可

image.png

完成操作!好了,我的总结到此结束!!!!

image.png