VuePress自动化部署到FTP

以下是实现 VuePress 自动化部署到 FTP 目录的步骤：

一、准备工作

1. 确保已经安装了 Node.js 和 VuePress。如果没有安装，可以从 Node.js 官方网站下载并安装。

2. 安装一个 FTP 客户端库，比如 ftp-deploy。可以使用以下命令安装：

   pnpm add -D ftp-deploy
   pnpm add -D dotenv
   

二、配置 VuePress

1. 在 VuePress 项目的根目录下，创建一个名为 deploy.cjs 的文件，并添加以下内容：

   const FtpDeploy = require("ftp-deploy");
   const ftpDeploy = new FtpDeploy();
   require("dotenv").config(); // 读取 .env 文件
   
   const config = {
      user: process.env.FTP_USER || "",
      password: process.env.FTP_PASSWORD || "",
      host: "www.comfydoc.cn",
      port: 22,
      localRoot: __dirname + "/docs/.vuepress/dist", // 本地目录
      remoteRoot: "/www/wwwroot/html",  // 远程目录
      include: ["*", "**/*"],  // 过滤上传文件
      exclude: [
         "dist/**/*.map",
         "node_modules/**",
         "node_modules/**/.*",
         ".git/**",
      ],
      deleteRemote: false,
      forcePasv: true,
      sftp: true,
   };
   
   ftpDeploy
      .deploy(config)
      .then((res) => console.log("finished:", res))
      .catch((err) => console.log(err));
   
   

   代码里的参数根据实际情况进行修改。 ftp用21端口，sftp用22端口。

2. 在 VuePress 项目的根目录下，创建一个名为 .env 的文件，并添加以下内容：

   FTP_USER=ftp
   FTP_PASSWORD=123
   
   

   上面字段分别对应ftp的用户名和密码。

三、创建部署脚本

1. 在 VuePress 项目的根目录下，创建 deploy.bat 文件，内容如下：

   @chcp 65001
   @echo off
   
   echo 开始构建
   call pnpm run docs:build 
   
   echo 开始发布
   cd deploy
   call node deploy.cjs
   cd ..
   
   echo 完成
   pause
   

这样，每次运行部署脚本时（双击deploy.bat），VuePress 项目将被构建并自动部署到指定的 FTP 目录。

请注意，确保你的 FTP 服务器配置正确，并且你有足够的权限进行部署。此外，这种方法可能需要根据你的具体环境进行调整。