前端发布流程总结（Vue + Element 项目）

一、背景说明

本项目基于：

Vue 3（或 Vue CLI 项目结构）
Element Plus
自定义 Node 脚本实现自动化部署（SFTP）

🚀 二、核心命令说明

1️⃣ 开发环境发布

复制代码

npm run release-dev

实际执行内容：

复制代码

vue-cli-service build && node ./release.server.js dev

2️⃣ 生产环境发布

复制代码

npm run release-prod

实际执行内容：

复制代码

vue-cli-service build && node ./release.server.js prod

⚙️ 三、整体发布流程

复制代码

执行 npm run release-xxx
        ↓
1. 前端项目打包（build）
        ↓
2. 生成静态资源（HTML / JS / CSS）
        ↓
3. 执行 release.server.js
        ↓
4. 通过 SFTP 连接服务器
        ↓
5. 上传文件到指定目录
        ↓
6. 发布完成

📁 四、构建阶段说明

使用工具

Vue CLI

构建命令

复制代码

vue-cli-service build

输出目录

复制代码

pc-last/

⚠️ 需在 vue.config.js 中配置：

复制代码

module.exports = {
  outputDir: "pc-last"
}

🔧 五、部署脚本（release.server.js）

1️⃣ 环境区分

复制代码

node release.server.js dev
node release.server.js prod

2️⃣ 发布策略

🔹 dev（测试环境）

复制代码

删除旧目录
↓
上传新文件

👉 特点：

简单粗暴
无备份
适合测试

🔹 prod（生产环境）

复制代码

旧目录重命名（备份）
↓
上传新文件

👉 示例：

复制代码

pc → pc_2026-04-02_10:30

👉 特点：

支持回滚
更安全

3️⃣ 核心能力

SFTP 连接服务器
递归上传目录
自动备份（生产环境）
上传日志输出

⚠️ 六、注意事项（重要）

❗ 1. 环境变量问题

目前问题没有暴露出来，因为项目中没有.env文件，如果有则存在风险：

❌ 场景1：接口打错环境

复制代码

你发布 dev
但请求的是生产接口

👉 结果：

测试数据污染生产 ❌
查问题非常痛苦 ❌

❌ 场景2：CDN路径错误

复制代码

静态资源路径指向生产CDN

❌ 场景3：调试开关关闭

复制代码

dev 环境看不到日志

当前写法：

复制代码

vue-cli-service build

👉 默认是 production 模式

✅ 必须优化：

📌 对应加载：

|-------------|---------------------------------|
| 命令 | 加载文件 |
| --mode dev | .env.dev |
| --mode prod | .env.prod 或 .env.production |

复制代码

"release-dev": "vue-cli-service build --mode dev && node ./release.server.js dev",
"release-prod": "vue-cli-service build --mode prod && node ./release.server.js prod"

❗ 2. 输出目录必须一致

复制代码

构建目录 ≠ 上传目录 → 发布失败

❗ 3. 删除目录风险（dev）

复制代码

client.rmdir(dst, true);

👉 风险：

路径错误会误删服务器文件

❗ 4. 明文服务器密码（安全问题）

复制代码

password: "xxx"

✅ 建议：

复制代码

process.env.SSH_PASSWORD

💡 七、标准发布流程（推荐操作）

✅ 开发环境发布

复制代码

npm run release-dev

✅ 生产环境发布

复制代码

npm run release-prod

👉 建议：

发布前确认代码
确认环境变量
确认服务器路径
手动打包替换Linux文件发布

🔁 八、回滚方案（生产环境）

目录结构示例

复制代码

/pc                当前版本
/pc_2026-04-02     历史版本

回滚方式

复制代码

mv pc pc_bad
mv pc_2026-04-02 pc

🧠 九、一句话总结

release-dev / release-prod 本质是：前端打包 + Node 脚本通过 SFTP 自动部署到服务器（dev 直接覆盖，prod 先备份再发布）

🎯 十、后续优化方向（进阶）

引入 CI/CD（JenkinsI）
使用环境变量管理敏感信息
支持版本号发布（tag）
增加灰度发布能力
Docker 化部署