vue打包实现推送
Vue 项目打包与自动化部署推送
打包 Vue 项目
使用以下命令生成生产环境代码,默认输出到 dist 目录:
npm run build
配置自动化推送(以 GitHub Pages 为例)
创建 deploy.sh 脚本文件,内容如下:
#!/usr/bin/env sh
# 构建失败时中止脚本
set -e
# 执行构建命令
npm run build
# 进入构建输出目录
cd dist
# 初始化 Git 并提交
git init
git add -A
git commit -m 'deploy'
# 推送到指定分支
git push -f git@github.com:username/repo.git master:gh-pages
cd -
配置 CI/CD 工具(以 GitHub Actions 为例)
在项目根目录创建 .github/workflows/deploy.yml:
name: Deploy
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm install && npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
服务器自动部署(SSH 方式)
修改 deploy.sh 实现服务器部署:
npm run build
tar -czvf dist.tar.gz dist
scp dist.tar.gz user@server:/path/to/target
ssh user@server "tar -xzf /path/to/target/dist.tar.gz -C /var/www/html"
注意事项
- 确保生产环境服务器已安装 Nginx/Apache
- GitHub Pages 需要启用 gh-pages 分支
- 敏感信息应使用环境变量存储
- 部署前建议进行测试环境验证
通过以上方法可实现 Vue 项目的打包和自动化推送部署,根据实际需求选择适合的方案。







