不到200行的vite-plugin-publish 快速发布前端项目

vite-plugin-publish 介绍

初衷：帮助前端开发者，快速将前端资源oss化，并将项目部署到远程服务器

1. 安装

yarn add vite-plugin-publish -D
// 或
npm i vite-plugin-publish -D

2. 配置

2.1 使用 vite.config.ts 配置

import vitePublish from 'vite-plugin-publish'
export default () => {
  return {
    plugins: [
      vitePublish({
        enable: true, // 是否启用
        ftp: {
          host: 'xxxxx', // ftp 服务ip地址
          port: 21, // ftp 端口
          websiteDir: 'm.lwp.fun', // 网站站点目录
          username: 'xxxx',
          password: 'xxxxx',
        },
        oss: { // oss 配置信息
          accessKeyId: 'xxxxx',
          accessKeySecret: 'xxxxx',
          region: 'xxxx',
          bucket: 'xxx',
        },
      }),
    ],
  }
}

tip：配置优先级 vite.config.ts 配置 >env环境变量

2.2 使用 env环境变量配置

字段	类型	Env 配置字段
enable	boolean	VITE_PUBLISH_enable
ftp.host	number	VITE_PUBLISH_FTP_host
ftp.port	string	VITE_PUBLISH_FTP_port
ftp.websiteDir	string	VITE_PUBLISH_FTP_websiteDir
ftp.user	string	VITE_PUBLISH_FTP_user
ftp.password	string	VITE_PUBLISH_FTP_password
oss.accessKeyId	string	VITE_PUBLISH_OSS_accessKeyId
oss.accessKeySecret	string	VITE_PUBLISH_OSS_accessKeySecret
oss.region	string	VITE_PUBLISH_OSS_region
oss.bucket	string	VITE_PUBLISH_OSS_bucket

3. 运行 yarn build

示例图：

4. 源码链接 github

tip：未配置oss，资源全量走ftp，文件稍大可能会崩（取决远端ftp服务是否稳定😆） 最后希望大家给仓库 点个star，这对我是最大的鼓励😘😘😘