当前位置：首页 > backend >正文

基于Vite的前端自动化部署方案

backend 2025/7/20 8:21:37

👨 作者简介：大家好，我是Taro，全栈领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

文章目录

前言
一、主流解决方案
二、了解SCP概念
三、自动化部署流程
- 1.创建Vite项目
- 2. config.js
- 3. index.js
- 4. package.json注册 deploy 部署命令
总结

前言

每次前端项目打包后，我们面临需要手动更新到服务器，效率低下且容易出错。本文将采用 npm run deploy 的脚本命令实现一个简单的自动化上传脚本

提示：以下是本篇文章正文内容，下面案例可供参考

一、主流解决方案

CI/CD 通过 Git 仓库的推送事件触发自动构建和部署
本地脚本自动化（简单场景）

二、了解SCP概念

SCP是指在本地主机与远程主机或者两台远程主机之间基于ssh协议安全地传输计算机文件。“SCP”通常指安全复制协议或者程序本身。

三、自动化部署流程

1.创建Vite项目

代码如下（示例）：基于Vite 创建 Vue.js 项目的命令

npm init vite@latest vue-deploy -- --template vue

项目根目录下添加 deploy 文件夹

在这里插入图片描述

deploy 文件夹下分别添加 index.js 和config.js 两个文件

安装所需库

npm i scp2 ora chalk  -D

2. config.js

代码如下（示例）：

export default {id: '',           // 服务器配置id，自定义即可describe: '测试环境',   // 对服务器配置的解释host: '192.168.1.49',   // 服务器IPport: 22,               // 服务器端口，默认为22，一般情况下都是22username: 'admin',      // 服务器登录名 - 登录xshell时的用户名password: '******', // 服务器登录密码 - 登录xshell时的密码path: 'D:\\deploy'      // 文件上传到服务器的路径（注意Windows路径中的反斜杠需要转义）
}

3. index.js


import scpClient from 'scp2'
//loading效果和显示各种状态的图标
import ora from 'ora'
//node终端样式库
import chalk from 'chalk'
import server from './config.js'// node 终端提示语，process.env：当前进程环境
const spinner = ora('正在发布到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试') + '服务器...')// loading
spinner.start()// scp2库上传文件
scpClient.scp('./dist/',{host: server.host,port: server.port,username: server.username,password: server.password,path: server.path},(err) => {spinner.stop()if (err) {console.log(chalk.red('发布失败.\n'))throw err} else {console.log(chalk.green('Success! 成功发布到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试') + '服务器! \n'))}}
)

4. package.json注册 deploy 部署命令

{"name": "vue-deploy","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview","deploy": "node ./deploy"},"dependencies": {"build": "^0.1.4","vue": "^3.5.13"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.3","chalk": "^5.4.1","ora": "^8.2.0","scp2": "^0.5.0","vite": "^6.3.5"}
}