vue部署只用一条命令，你爱了么！

大家平时部署项目到服务器是不是这样的步骤： 打开Xftp之类的文件传输软件，连接服务器，打开项目部署文件目录。 然后build项目，将dist文件夹中的文件复制到项目部署文件目录。方便么？没有学会自动化部署之前是感觉挺方便的，接下来请食用自动化部署。

安装sftpupload

$ yarn add sftp-uploader
$ npm i sftp-uploader
$ pnpm i sftp-uploader

webpack中使用

//vue.config.js

import { resolve } from "path";
import sftpUploader from "sftp-uploader"

const sftpConfig = {
    //需要上传文件的目录,(也可直接使用dist路径字符串，但是需要将\替换为/。建议使用灵活维护方式)
    dir: resolve(__dirname, "dist/").replace(/\\/g, '/'),
    //服务器项目部署文件目录（存放assets、favicon.ico、index.html、robots.txt的目录）
    url: '/home/deploy/quality/', 
    host: '192.185.**.**', //sftp地址
    port: '****', //端口
    username: '****', //账号
    password: '****', //密码
    
     //延迟上传时间（毫秒），解决部分项目会触发多次打包完成的问题
    delay: 0,

    //上传文件过滤器，可以过滤不需要的文件，返回false将不会上传该文件（可选）
    uploadFilter: (file) => {
        return true;
    },
    //删除文件过滤器，可以过滤掉不需要删除的文件，返回false将不删除文件（可选）。如果不返回false，会将上传的目录下的所有文件清空
    deleteFilter: (file) => {
        return false
    },
    //预览链接地址
    previewPath: 'https://juejin.cn/editor/drafts/7138590448485924878',
};


module.exports = {
  configureWebpack: config => {
    return {
      plugins: [
        sftpUploader(sftpConfig)
      ]
    }
  }
}


// package.json
// 1、window环境
"scripts": {
  "build": "vue-cli-service build --mode development",
  "deploy": "set UPLOAD=true && pnpm build"
}
// 2、liunx or macos环境
"scripts": {
  "build": "vue-cli-service build --mode development",
  "deploy": "export UPLOAD=true && yarn build"
}

vite中使用

//vite.config.js

import { resolve } from "path";
import sftpUploader from "sftp-uploader"

const sftpConfig = {
    //需要上传文件的目录,(也可直接使用dist路径字符串，但是需要将\替换为/。建议使用灵活维护方式)
    dir: resolve(__dirname, "dist/").replace(/\\/g, '/'),
    //服务器项目部署文件目录（存放assets、favicon.ico、index.html、robots.txt的目录）
    url: '/home/deploy/quality/', 
    host: '192.185.**.**', //sftp地址
    port: '****', //端口
    username: '****', //账号
    password: '****', //密码
    
     //延迟上传时间（毫秒），解决部分项目会触发多次打包完成的问题
    delay: 0,

    //上传文件过滤器，可以过滤不需要的文件，返回false将不会上传该文件（可选）
    uploadFilter: (file) => {
        return true;
    },
    //删除文件过滤器，可以过滤掉不需要删除的文件，返回false将不删除文件（可选）。如果不返回false，会将上传的目录下的所有文件清空
    deleteFilter: (file) => {
        return false
    },
    //预览链接地址
    previewPath: 'https://juejin.cn/editor/drafts/7138590448485924878',
};


export default defineConfig({
    plugins: [
        vue(),
        sftpUploader(sftpConfig),
    ]
})

// package.json
// 1、window环境
"scripts": {
  "build": "vite build--mode development",
  "deploy": "set UPLOAD=true && pnpm build"
}
// 2、liunx or macos环境
"scripts": {
  "build": "vite build --mode development",
  "deploy": "export UPLOAD=true yarn yarn build"
}

需要部署的时候，使用 yarn deploy 或 npm run deploy或 npm run deploy。就酱紫

这时候你是不是以为结束了，【嘿嘿】

如果我们不想每次都配合build使用，只想单独上传文件部署，那就这样做吧：

// 1、在项目中创建deploy.js，目录为\src\utils\deploy.js（这个目录更改的话，之后的cd 命令目录也要修改）

const sftpUploader = require('sftp-uploader')
const path = require("path");

const sftpConfig = {
    //需要上传文件的目录,(也可直接使用dist路径字符串，但是需要将\替换为/。建议使用灵活维护方式)
    dir: path.join(__dirname.split('src')[0], 'dist/').replace(/\\/g, '/'),
    //服务器项目部署文件目录（存放assets、favicon.ico、index.html、robots.txt的目录）
    url: '/home/deploy/quality/', 
    host: '192.185.**.**', //sftp地址
    port: '****', //端口
    username: '****', //账号
    password: '****', //密码
    
     //延迟上传时间（毫秒），解决部分项目会触发多次打包完成的问题
    delay: 0,

    //上传文件过滤器，可以过滤不需要的文件，返回false将不会上传该文件（可选）
    uploadFilter: (file) => {
        return true;
    },
    //删除文件过滤器，可以过滤掉不需要删除的文件，返回false将不删除文件（可选）。如果不返回false，会将上传的目录下的所有文件清空
    deleteFilter: (file) => {
        return false
    },
    //预览链接地址
    previewPath: 'https://juejin.cn/editor/drafts/7138590448485924878',
};

SftpUploader({ ... }).put()

// 然后在deploy.js的目录终端下运行如下命令。（如果不知道不知道这个终端目录，你直接输入命令 cd utils文件夹的路径（绝对路径））

输入命令 node deploy.js 

本文完结

点赞+关注+评论=学会了