vue-cli3项目打包后自动化部署到服务器的方法


Posted in Javascript onSeptember 16, 2020

一、安装 scp2

npm install scp2 --save-dev

二、写好脚本
例如 upload.js (下面任选一个即可)
位置和 package.json平级即可。

简略版

'use strict'
// 引入scp2
var client = require('scp2');

client.scp('./dist/', { // 本地打包文件的位置
 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址
 "port": 'XX',   // 服务器端口, 一般为 22
 "username": 'XXX',  // 用户名
 "password": '*****',  // 密码
 "path": 'XXX'   // 项目部署的服务器目标位置
}, err =>{
 if (!err) {
 console.log("项目发布完毕!")
 } else {
 console.log("err", err)
 }
})

稍微美化下控制台的输出

'use strict'
// 引入scp2
var client = require('scp2');
// 下面三个插件是部署的时候控制台美化所用 可有可无
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到服务器...'));
spinner.start();

client.scp('./dist/', { // 本地打包文件的位置
 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址
 "port": 'XX',   // 服务器端口, 一般为 22
 "username": 'XXX',  // 用户名
 "password": '*****',  // 密码
 "path": 'XXX'   // 项目部署的服务器目标位置
}, err =>{
 spinner.stop();
 if (!err) {
 console.log(chalk.green("项目发布完毕!"))
 } else {
 console.log("err", err)
 }
})

✨记得项目git上传时忽略此文件, 因为这里面包含了你的服务器地址、用户以及密码
三、在 package.json中添加 scripts 命令

"upload": "node upload.js",
"deploy": "npm run build && npm run upload"

四、执行脚本

npm run deploy

运行这个脚本命令之后,它会先npm run build执行打包命令,然后,执行node upload.js,将打包的文件上传到服务器

到此这篇关于vue-cli3项目打包后自动化部署到服务器的方法的文章就介绍到这了,更多相关vue-cli3打包自动化部署到服务器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
vue实现全选和反选功能
Aug 31 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 #Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 #Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 #Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 #Javascript
Vue项目打包编译优化方案
Sep 16 #Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 #Javascript
如何在JS文件中获取Vue组件
Sep 16 #Javascript
You might like
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
PHP重载基础知识回顾
2020/09/10 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
javascript 函数式编程
2007/08/16 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python三元运算符实现方法
2013/12/17 Python
单利模式及python实现方式详解
2018/03/20 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
专业销售业务员求职信
2013/11/18 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
作文评语集锦
2014/12/25 职场文书
行政复议答复书
2015/07/01 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python