littlebot
Published on 2025-04-13 / 0 Visits
0

【源码】基于Vite的前端自动化部署插件

项目简介

vite-plugin-lvdeploy 是一款基于 Vite 的前端自动化部署方案依赖插件,其主要作用是帮助开发者将前端项目自动化部署到指定服务器,从而简化部署流程。

项目的主要特性和功能

  1. 多环境支持:能够自定义多个部署环境,例如开发环境(dev)、测试环境(test)等,可依据不同需求灵活配置服务器信息。
  2. 自动化部署:在项目打包时可自动把打包文件部署到指定服务器的指定目录,有效提高部署效率。
  3. 目录处理:自动检测服务器上的部署目录是否存在,若不存在则创建;若存在则清空该目录并重新部署前端项目。

安装使用步骤

前提条件

假设用户已经下载了本项目的源码文件,且系统中已安装 Node.js 和 npm。

安装插件

在项目根目录下执行以下命令安装 vite-plugin-lvdeploy: bash npm install vite-plugin-lvdeploy

配置插件

vite.config.js 文件中引入并配置该插件: ```javascript import vitePluginLvdeploy from './vite-plugin-lvdeploy'

export default { plugins: [ vue(), vitePluginLvdeploy({ "dev":{ host:'xxx.xxx.xxx.xxx',//服务器IP port:22,//服务器端口 username:'xxxxxx',//服务器ssh登录用户名 password:'xxxxxx',//服务器ssh登录密码 serverpath:'/www/xxxx/xxxx',//服务器web目录 切记不要加/ 当前目录不存在会创建目录并且当前目录所有文件会被清空重新部署前端项目 }, "test":{ host:'xxx.xxx.xxx.xxx',//服务器IP port:22,//服务器端口 username:'xxxxxx',//服务器ssh登录用户名 password:'xxxxxx',//服务器ssh登录密码 serverpath:'/www/xxxx/xxxx',//服务器web目录 切记不要加/ 当前目录不存在会创建目录并且当前目录所有文件会被清空重新部署前端项目 } //...其他自定义环境 }), ] } ```

打包部署

在项目根目录下执行以下命令进行打包并部署: bash npm run build

注意事项

  • 当不输入 0 时只会打包 zip 包不会部署。
  • serverpath 参数路径会自动检测是否存在,不存在会创建目录,若存在会清空当前目录。
  • vite.config.js 中若未配置 build.outDir(打包文件名夹名称),将会使用默认值 'dist'。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】