前端项目打包部署完整流程

1. 环境准备

• 确认项目为 Vue.js 前端项目
• 已安装 Node.js (>= 14.0.0) 和 npm (>= 6.0.0)
• 项目依赖已安装 (node_modules)

2. 选择打包环境

根据部署环境选择对应的打包命令:

• 测试环境 : npm run build:test
• 生产环境 : npm run build:prod

3. 执行打包

# 进入项目目录
cd web-master-20260116

# 执行测试环境打包
npm run build:test

4. 打包结果

打包成功后,在项目根目录生成 dist 文件夹,包含:

• static/ - 静态资源(CSS、JS、图片、音频等)
• webAdmin/ - 管理后台模块
• webDocument/ - 文档模块
• webEPSS/ - EPSS 模块
• favicon.ico - 网站图标

5. 文件传输

由于堡垒机文件管理无法直接上传文件夹,采用压缩包方式:

打包 (可选,如用 tar.gz):

tar -czf dist.tar.gz dist

上传压缩包:

• 通过堡垒机 Web 界面上传 dist.zip 到服务器

6. 服务器部署

登录服务器后执行:

# 进入部署目录
cd /data/apps/web-admin

# 解压文件
unzip dist.zip

# 将 dist 目录内容移到当前目录
mv dist/* .

# 删除空目录
rmdir dist

# 删除压缩包
rm dist.zip

7. 验证部署

• 刷新浏览器或重启 Nginx 服务
• 访问内网云平台地址验证功能是否正常
• 确认后端 API 接口地址配置正确(测试环境为 /test-api 等)

关键注意事项:

1. 环境配置: 打包前确认使用正确的环境配置(test/prod)
2. API 代理: 确保服务器 Nginx 配置了正确的 API 反向代理
3. 文件覆盖 : 更新部署时会提示覆盖,选择 A 全部覆盖
4. 备份: 重要部署前建议先备份旧版本

这样整个打包部署流程就完成了!