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

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. 备份: 重要部署前建议先备份旧版本

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