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 相关文章推荐
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
微信小程序自定义组件
2017/08/16 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python3多线程操作简单示例
2018/05/22 Python
python读取和保存图片5种方法对比
2018/09/12 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
解决Django连接db遇到的问题
2019/08/29 Python
Django实现基于类的分页功能
2019/10/31 Python
浅析python中while循环和for循环
2019/11/19 Python
Python之Class&Object用法详解
2019/12/25 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
暑期培训随笔感言
2014/03/10 职场文书
寒假家长评语大全
2014/04/16 职场文书
气象学专业个人求职信
2014/04/22 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
自我推荐信怎么写
2015/03/24 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Python基于百度API识别并提取图片中文字
2021/06/27 Python