当前位置:首页 > VUE

vue打包实现推送

2026-01-08 05:41:33VUE

Vue 项目打包与自动化部署推送

打包 Vue 项目 使用以下命令生成生产环境代码,默认输出到 dist 目录:

npm run build

配置自动化推送(以 GitHub Pages 为例)

创建 deploy.sh 脚本文件,内容如下:

vue打包实现推送

#!/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

vue打包实现推送

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 项目的打包和自动化推送部署,根据实际需求选择适合的方案。

标签: vue
分享给朋友:

相关文章

vue 页签实现

vue 页签实现

Vue 页签实现方法 在 Vue 中实现页签功能通常涉及动态组件、路由或状态管理。以下是几种常见的实现方式: 使用动态组件 通过 Vue 的 <component> 动态组件结合 v-f…

vue设计与实现下载

vue设计与实现下载

vue设计与实现电子书下载 《Vue.js设计与实现》是一本深入解析Vue.js框架原理的书籍,由霍春阳(HcySunYang)撰写。以下是获取该资源的常见途径: 正版购买渠道 京东、当当、天猫等…

vue实现switch

vue实现switch

Vue 实现 Switch 开关组件 在 Vue 中实现 Switch 开关组件可以通过自定义组件或使用现有 UI 库完成。以下是几种常见实现方式: 自定义 Switch 组件 创建一个基础 Sw…

vue实现fullpage

vue实现fullpage

Vue 实现 FullPage 效果 在 Vue 中实现全屏滚动(FullPage)效果可以通过多种方式完成,以下是几种常见的方法: 使用现有库 vue-fullpage.js 安装 vue-ful…

vue实现定时

vue实现定时

Vue 实现定时功能的方法 使用 setInterval 和 clearInterval 在 Vue 中可以通过 setInterval 和 clearInterval 实现定时功能。在组件的 mou…

vue实现dag

vue实现dag

Vue实现DAG(有向无环图) 在Vue中实现DAG(Directed Acyclic Graph,有向无环图)通常涉及数据结构的建模、可视化渲染以及交互逻辑处理。以下是关键实现步骤和示例代码: 数…