前端自动化部署项目到服务器（deploy-cli-service）

本篇文章包含deploy-cli-service安装步骤和我在安装过程中遇到的一些问题，希望可以帮助到你。

 npm地址:deploy-cli-service - npm (npmjs.com)

操作环境：

服务器系统：windows

项目：vue

服务器运营商：腾讯云

①安装deploy-cli-service

npm install deploy-cli-service -g

npm源有本地安装方法，这里不再介绍，详情可参考地址跳转链接-->npm

 

②查看是否安装成功

deploy-cli-service -v

显示版本号即安装成功
C:\Users\admin\Desktop\study后台管理系统>deploy-cli-service -v
1.3.0

 

③查看帮助信息

C:\Users\admin\Desktop\study后台管理系统>deploy-cli-service
Usage: deploy-cli-service [options] [command]
 
Options:
  -v, --version       输出当前版本号
  -h, --help          获取帮助
 
Commands:
  deploy|d [options]  部署项目
  init|i              初始化项目

④初始化项目

（一）命令行形式初始化项目

deploy-cli-service init

只演示了开发环境的命令行初始化配置

 这里有 dev（开发环境），test（测试环境），prod（生产环境）

操作方式：

上下按键：切换环境

空格按键：进行选择和取消选择

按照自己的实际情况进行填写 ，填写完成之后会在文件下自动生成一个 < deploy.config.js > 文件！

（二）手动添加的形式初始化项目

在文件目录下手动配置一个 < deploy.config.js > 文件，按需求进行添加填写

module.exports = {
  projectName: 'vue_samples', // 项目名称
  privateKey: '/Users/fuchengwei/.ssh/id_rsa',
  passphrase: '',
  cluster: [], // 集群部署配置，要同时部署多台配置此属性如: ['dev', 'test', 'prod']
  dev: {
    // 环境对象
    name: '开发环境', // 环境名称
    script: 'npm run build', // 打包命令
    host: '192.168.0.1', // 服务器地址
    port: 22, // 服务器端口号
    username: 'root', // 服务器登录用户名
    password: '123456', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
    bakDir: '/usr/local/nginx/backup', // 备份路径 (打包前备份之前部署目录 最终备份路径为 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
    isRemoveLocalFile: true // 是否删除本地文件（默认true）
  },
  test: {
    // 环境对象
    name: '测试环境', // 环境名称
    script: 'npm run build:test', // 打包命令
    host: '192.168.0.1', // 服务器地址
    port: 22, // 服务器端口号
    username: 'root', // 服务器登录用户名
    password: '123456', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
    bakDir: '/usr/local/nginx/backup', // 备份路径 (打包前备份之前部署目录 最终备份路径为 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
    isRemoveLocalFile: true // 是否删除本地文件（默认true）
  },
  prod: {
    // 环境对象
    name: '生产环境', // 环境名称
    script: 'npm run build:prod', // 打包命令
    host: '192.168.0.1', // 服务器地址
    port: 22, // 服务器端口号
    username: 'root', // 服务器登录用户名
    password: '123456', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
    bakDir: '/usr/local/nginx/backup', // 备份路径 (打包前备份之前部署目录 最终备份路径为 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
    isRemoveLocalFile: true // 是否删除本地文件（默认true）
  }
}

⑤在package.json文件添加一项配置

{
  "name": "myvue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
 
    我在这，我在这，我在这！
    这里是“deploy:dev”，所以一会启动使用npm run deploy:dev
    添加下面这一行代码
 
    "deploy:dev": "deploy-cli-service deploy --mode dev"
 
  },

⑥部署开发环境到服务器

npm run deploy:dev

 即完成项目自动打包上线部署

遇到的问题

①操作系统是windows10系统，ssh登录访问失败

 

解决方案：

可以看这位兄弟的博客win10开启ssh服务远程连接_、moddemod的博客-CSDN博客_ssh连接win10

文字步骤：

win➡设置➡应用➡新增可选功能➡添加功能➡OpenSSH服务器➡安装
win+R启动命令行输入
net start sshd  启动服务

ssh Administrator@124.222.46.11

会提示：
主机“0.0.0.0(0.0.0.0)”的真实性无法建立。  
ECDSA密钥指纹为SHA256:I1+PXXXXXXXXXXXXXXXXXXwSNWDZM。  
您确定要继续连接(是/否)? 
输入‘yes’
设置密码即可完成ssh登录设置

②服务器部署路径错误，导致没有查找到文件

我是直接复制了地址栏的地址放到服务器路径位置如：C:\BtSoft\nginx\html

好像默认是选择c盘，那么正确路径写法应该是：/BtSoft/nginx/html

最后遗留了一个问题，文件上传到服务器之后无法自动完成解压缩，但是命令行却提示解压成功，暂时没找到问题所在的原因，如果有知道解决办法的兄弟也可以留言交流一下