当前位置:首页 > VUE

vue打包实现推送

2026-01-08 05:41:33VUE

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

vue打包实现推送

标签: vue
分享给朋友:

相关文章

vue实现滑动

vue实现滑动

Vue 实现滑动效果 使用 CSS 过渡和动画 通过 Vue 的 transition 组件结合 CSS 过渡或动画实现滑动效果。适用于简单的元素入场/离场滑动。 <template>…

vue 实现长列表

vue 实现长列表

Vue 实现长列表的优化方案 虚拟滚动技术 虚拟滚动是处理长列表的高效方式,仅渲染可视区域内的元素。通过计算滚动位置动态加载和卸载DOM节点,大幅减少内存占用和渲染压力。 <template&…

vue实现添加用户

vue实现添加用户

Vue 实现添加用户功能 数据绑定与表单设计 在 Vue 中实现添加用户功能,首先需要设计一个表单,用于收集用户输入的数据。通过 v-model 实现双向数据绑定,确保表单数据与 Vue 实例中的数据…

vue实现条件判断

vue实现条件判断

Vue 条件判断实现方法 Vue 提供了多种方式实现条件判断,可以根据不同场景选择合适的方式。 v-if / v-else-if / v-else 这是 Vue 中最常用的条件渲染指令,根据表达式…

vue 页签实现

vue 页签实现

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

vue实现按钮刷新

vue实现按钮刷新

Vue 实现按钮刷新功能 在 Vue 中实现按钮刷新功能可以通过多种方式实现,具体取决于刷新需求是局部刷新还是全局刷新。以下是几种常见的方法: 使用 window.location.reload()…