利用cmd将vue项目部署到云服务器(前端)

本文详细介绍如何通过命令行工具将Vue项目打包并部署至云服务器。步骤包括:使用npm run build生成dist文件夹,复制并压缩dist至指定路径,通过scp命令上传至服务器,最后利用ssh进行远程登录及配置。适合前端开发者参考。

利用cmd将vue项目部署到云服务器(前端)

1将vue项目打包成dist文件夹

  • 在终端输入命令行npm run build即可,会看到文件交目录出现一个dist文件夹。
    在这里插入图片描述
    关于部署之前要做的一些事情,我写在了另一篇博客里,可以点击这里跳转。

2、将dist文件夹复制到D盘一个全英文环境的文件夹里边并压缩

  • 比如我这个,放到了D盘一个新建的test文件夹下面
    在这里插入图片描述
    3、打开两个cmd命令行窗口

第一个cmd窗口

  • 要在test文件夹目录下打开cmd,用来上传文件。
  • 这里有一个快捷操作,同时按住shift和鼠标右键,再点击在此处打开powershell窗口
  • 输入start cmd 就可以打开了。
    在这里插入图片描述
  • 在打开的cmd窗口里输入scp+本地dist压缩包地址+服务器目录地址
    我这里就是 scp D:\test\dist.zip root@106.13.118.220:/usr/local/tomcat/tomcat8.5/webapps
  • 回车后输入密码,命令行不会显示密码,你只管输入即可。
  • 出现**100%**就说明上传成功了。
    在这里插入图片描述

第二个cmd窗口

  • 在第二个命令行窗口,使用ssh 远程登录服务器。

ssh ‘用户名’@‘IP地址’ #不用加’号,这里是为了作区分
‘用户名’@‘IP地址’'s password: xxx

  • 下面是我的步骤,仅供参考
    在这里插入图片描述

在这里插入图片描述
4、结语

  • 这一步本来是队友弄的,不过这步最好还是懂开发的人来弄。我也是在福哥的指导下花了1晚上,这篇也是把福哥的指导记录下来,感激福哥。太难了太难了,白白。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值