vue 打包后自动部署到云服务器——scp2教程

简介: vue 打包后自动部署到云服务器——scp2教程

1. 安装scp2

cnpm i scp2 --save-dev

2. 新建文件upload.js

package.json同级

let client = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到服务器...'));
spinner.start();

client.scp('./dist/', {    // 本地打包后,项目包的相对路径,默认为./dist
  "host": '106.12.123.173', // 云服务器的IP地址
  "port": '22',            // 云服务器端口, 一般为22
  "username": 'root',       // 云服务器用户名,linux系统一般为root
  "password": '******',     // 云服务器密码,若忘记了,可以去云服务器主页重置密码
  "path": '/root/itNote'   // 项目包上传到云服务器的目标位置,根据nginx配置决定
}, err =>{
  spinner.stop();
  if (!err) {
    console.log("项目发布完毕!")
  } else {
    console.log("err", err)
  }
})

3. 添加自动部署命令

在package.json的scripts的末尾添加

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

4. 运行命令,自动打包部署

npm run pub

控制台输出 “ 项目发布完毕! ” 时,即部署成功

5. 查看项目

浏览器中访问 http://106.12.123.173/works/itNote

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
3天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
3天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
3天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
2天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
12 2
|
2天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
2天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
2天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
11 0
|
缓存 资源调度 前端开发
用webpack4带你实现一个vue的打包的项目
一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置,一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤。
2965 0
|
10天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
31 9
|
10天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
25 7