vue-cli3项目打包后自动化部署到服务器的方法
更新时间：2020年09月16日 10:38:58 作者：_xixi_
这篇文章主要介绍了vue-cli3项目打包后自动化部署到服务器的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、安装 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打包自动化部署到服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-cli对element-ui组件进行二次封装的实战记录
组件类似于需要多个地方用到的方法,在Vue中组件就是一种复用（经常使用）一个功能的手段,下面这篇文章主要给大家介绍了关于Vue element ui二次封装的相关资料,需要的朋友可以参考下2022-06-06
element el-tree组件的动态加载、新增、更新节点的实现
这篇文章主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
本篇文章主要介绍了详解vue嵌套路由-params传递参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
在一般情况下,vue项目代码部署发布只需将代码打包后直接上传到服务器即可,下面这篇文章主要给大家介绍了关于Vue项目打包并发布的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
基于Vue3+Element Plus 实现多表单校验demo
表单校验在日常的开发需求中是一种很常见的需求,通常在提交表单发起请求前校验用户输入是否符合规则,通常只需formRef.value.validate()即可校验,本文给大家介绍基于Vue3+Element Plus 实现多表单校验demo,感兴趣的朋友一起看看吧2024-06-06
这篇文章主要介绍了详解vue-router的导航钩子(导航守卫)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了在Vue项目中引入腾讯验证码服务的教程,需要的朋友可以参考下2018-04-04
这篇文章主要为大家介绍了vue实现At人文本输入框示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Vue使用v-model封装el-pagination组件的全过程
通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个，对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧2021-07-07
今天小编就为大家分享一篇vue iview的菜单组件Mune 点击不高亮的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论