前端项目自动化部署

> 前言：为了提升开发效率，原计划用 **jenkins+git** 进行项目自动化部署，但由于公司做的是银行业务，银行的代码只能通过固定的内网ip访问，而银行代码git托管和部署服务器之间又不能相互通信，于是写了两个插件发布到npm和github上，大家可以通过配置方式来实现自动化部署。

## webpack或者vue-cli环境实现方式
* 安装插件 # webpack-automatic-deployment
```sh
npm install webpack-automatic-deployment --save-dev
# OR
yarn add webpack-automatic-deployment --dev
# OR
pnpm add webpack-automatic-deployment --save-dev
```

* Usage 使用方法

    webpack使用方法：配置**webpack.config.js**
    ```js
    const WebpackAutomaticDeployment = require("webpack-automatic-deployment");

    module.exports = {
      plugins: [new WebpackAutomaticDeployment({
          host: 'your server ip',
          username: 'your server users',
          password: 'your server password',
          remotePath: 'your project path on the server '
        })],
    };
    ```
    vue cli使用方法：配置**vue.config.js**
    ```js
    const WebpackAutomaticDeployment = require("webpack-automatic-deployment");

    module.exports = {
        configureWebpack: {
            plugins: [
                new WebpackAutomaticDeployment({
                  host: 'your server ip',
                  username: 'your server users',
                  password: 'your server password',
                  remotePath: 'your project path on the server '
                })
            ]
        }
    };
    ```
💪 配置好后，运行 **npm run build** 命令即可实现代码打包后自动上传部署至服务器

⚠️ **特别注意：**
* 1.项目中配置的要有process.env.NODE_ENV为production的值，否则插件不会生效
* 2.服务器上的项目路径要指定到**项目文件夹**，因为每次上传前会先删除文件夹
     + 如：您项目上传服务器的地址为：/root/www，你的项目文件夹名为 project_demo，那么对应配置的时候remotePath的值应为：/root/www/project_demo

## vite环境实现方式
* 安装插件 # vite-plugin-auto-deploy
```sh
npm install vite-plugin-auto-deploy --save-dev
# OR
yarn add vite-plugin-auto-deploy --dev
# OR
pnpm add vite-plugin-auto-deploy --save-dev
```

* Usage 使用方法
    + 配置 **vite.config.ts**
    ```js
    import autoDeployPlugin from 'vite-plugin-auto-deploy'

    export default defineConfig({
      plugins: [
        autoDeployPlugin({
            host: 'your server ip',
            username: 'your server users',
            password: 'your server password',
            remotePath: 'your project path on the server '
        })
      ]
    })
    ```
⚠️ **注意事项：** 同上

⚠️ 如果您觉得插件用的不错，请在github上点个 **start** 支持一下