vue插件

vue插件分为两种，一种是CLI插件,一种是Service插件

Service 插件

• Service 插件会在一个 Service 实例被创建时自动加载——比如每次 vue-cli-service 命令在项目中被调用时。
• 我们接下来要完成的插件，在执行命令vue-cli-service publish时就会被执行。
• 这是一个将打包好的文件自动推送至服务器的插件。我们接下来描述一下我们完成这个插件的步骤：
  1. 注册命令： 在 package.json中注册我们执行这个插件的命令vue-cli-service publish。
  2. 声明插件：vue插件是需要注册的，不注册的话，vue是无法识别publish到底指向哪个插件，故而，我们需要在package.json中通过vuePlugins声明service插件。
  3. 注册插件：使用Service 插件的registerCommand语法注册插件
  4. 写个插件：插件需要先将dist文件夹压缩成压缩包，然后将压缩包上传替换服务器的文件，这其中需要archiver压缩文件，ssh2连接服务器，所以，写代码前需要先安装这两个包啦，记得加上dev，用于开发环境。如果你问我哪个包，npm搜索一下，对，这句话就是写给我自己的。

1.注册命令

在 script脚本中添加 publish的命令

"scripts": {
    "publish": "vue-cli-service publish",
  },

2. 声明插件

  "vuePlugins": {
    "service": [
      "./publish/vue-cli-plugin-publish"
    ]
  },

3.注册插件

• 在根部目录下新建publish文件夹用于存放publish插件相关文件
• 在该目录下新建 vue-cli-plugin-publish.js文件，添加如下代码,就完成了一个Service插件的注册

  module.exports = (api, projectOptions) => {
  //内建命令
  api.registerCommand('publish', {
  description: '自动构建部署',
  usage: 'vue-cli-service publish',
  options: {}
  }, (args) => {
  //这里写插件功能
  })
  }

4.写个插件

• 接下来我们来添加插件功能的代码
• 在之前的 vue-cli-plugin-publish.js文件中添加以下两端代码，分别添加在开头和中间

  const config = require('./config')
  const fs = require('fs')
  const archiver = require('archiver')

• 插入至插件功能的位置。当然，我们也可以新建一个文件，用require的方式引用这个方法。

  4.1压缩文件

  (function() {
    // console.log(chalk.cyan('  Zip files.\n'))
    //找到dist文件夹，并创建压缩包
    var output = fs.createWriteStream(`publish/${config.title}.zip`)
    var archive = archiver('zip')
    console.log('in zip ~~~~~~~~~~~~')
  
    output.on('close', function() {
      // console.log(chalk.cyan('  Zip files.\n'))
      // console.timeEnd('key')
      console.log('compress completed...ready upload')
      //压缩完成，上传文件，这里我将上传文件的逻辑放在publish.js文件中
      require('./publish')()
    })
  
    output.on('end', function() {
    })
  
    archive.on('error', function(err) {
      throw err
    })
  
    archive.pipe(output)
    archive.glob('./dist' + '/**')
    archive.finalize()
  })()

  4.2上传文件

• 好啦，新建一个publish.js文件，把代码放进去啦。

const chalk = require('chalk')
// shh2的用法 模拟个服务器
var Client = require('ssh2').Client
//创建个连接
var conn = new Client()
//写过node的小伙伴都知道啊fs是用于读写文件的,细节什么的，自己看文档吧，毕竟我也不老记得
//链接放这了啊 http://nodejs.cn/api/fs.html#fs_file_system
var fs = require('fs')
//这个就是那个配置文件啦
const defaultSettings = require('./config')

/**
 * 1.进入目录
 * 2.删除旧的备份项目
 * 3.将原项目名称加上bak标志为备份文件
 * 4.解压缩上传的zip文件并将名称改为项目名称
 * 5.删除zip文件
 * 6.退出
 * @type {string[]}
 */
const uploadShellList = [
  `cd ${defaultSettings.path}\n`,
  `rm -rf ${defaultSettings.title}.bak\n`,
  `mv ${defaultSettings.title} ${defaultSettings.title}.bak\n`,
  `unzip ${defaultSettings.title}.zip\n`,
  `mv dist ${defaultSettings.title}\n`,
  `rm -rf ${defaultSettings.title}.zip\n`,
  `exit\n`
]
const params = { file: `./publish/${defaultSettings.title}.zip`, target: `${defaultSettings.path}/${defaultSettings.title}.zip` }

function Ready() {
  conn.on('ready', function() {
    console.log('Client :: ready')
    UploadFile(conn, params)
  }).connect(defaultSettings)
}

/**
 * 上传文件
 * @param conn
 * @param params
 * @constructor
 */
function UploadFile(conn, params) {
  const file = params.file
  const target = params.target

  if (!conn) {
    return
  }
  conn.sftp(function(err, sftp) {
    if (err) {
      throw err
    }
    sftp.fastPut(file, target, {}, function(err, result) {
      if (err) {
        console.log(chalk.red(err.message))
        throw err
      }
      Shell(conn)
    })
  })
}

/**
 * 上传完成后服务器需要执行的内容
 * 删除本地压缩文件
 * @param conn
 * @constructor
 */
function Shell(conn) {
  conn.shell(function(err, stream) {
    if (err) throw err
    stream.on('close', function() {
      console.log('Stream :: close')
      conn.end()
      fs.unlinkSync(`./publish/${defaultSettings.title}.zip`)
    }).on('data', function(data) {
      console.log('STDOUT: ' + data)
    }).stderr.on('data', function(data) {
      console.log('STDERR: ' + data)
    })
    stream.end(uploadShellList.join(''))
  })
}

module.exports = function() {
  try {
    Ready()
  } catch (err) {
    console.log(err)
  }
}

得类，配置文件也放出来给你们

• privateKey或者password都可以呦，小伙伴请自行选择

  module.exports = {
  title: '打包后文件夹名称',
  host: '就是你要上传的服务器地址',
  port: 22,
  username: '用户名',
  privateKey: require('fs').readFileSync('c:/Users/zmx/.ssh/id_rsa'),
  path: '文件夹地址'
  }

Service插件 补充

插件传参

• 如果你的配置文件想通过在调用插件的时候传参，当然是可以的

• 请打开 vue.config.js文件,没有的话，自己创建一个吧。

  传参

  // vue.config.js相关代码
  module.exports = {
  pluginOptions: {
  publish: {
    // vue-cli-plugin-publish 插件可以作为 `projectOptions.pluginOptions.publish` 访问这些选项，其他插件也可以拿到
    param: '传参数给內建插件'
  }
  }
  }

  拿参

  module.exports = (api, projectOptions) => {
  api.registerCommand('publish', {
  description: '自动构建部署',
  usage: 'vue-cli-service publish',
  options: {}
  }, (args) => {
  // 输出传入的参数
  // projectOptions 拿到的是 vue.config.js 文件暴露出来的配置
  console.log(projectOptions.pluginOptions.publish.param)
  })
  }

  配置模块

  module.exports = (api, projectOptions) => {
  api.chainWebpack(webpackConfig => {
  // 通过 webpack-chain 修改 webpack 配置
  })
  
  api.configureWebpack(webpackConfig => {
  // 修改 webpack 配置
  // 或返回通过 webpack-merge 合并的配置对象
  })
  
  api.registerCommand('test', args => {
  // 注册 `vue-cli-service test`
  })
  }

本作品采用《CC 协议》，转载必须注明作者和本文链接