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

news2025/6/2 8:41:25

👨 作者简介：大家好，我是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',   // 服务器IP
  port: 22,               // 服务器端口，默认为22，一般情况下都是22
  username: '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"
  }
}