当前位置:首页 > 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"

注意事项

vue打包实现推送

  • 确保生产环境服务器已安装 Nginx/Apache
  • GitHub Pages 需要启用 gh-pages 分支
  • 敏感信息应使用环境变量存储
  • 部署前建议进行测试环境验证

通过以上方法可实现 Vue 项目的打包和自动化推送部署,根据实际需求选择适合的方案。

标签: vue
分享给朋友:

相关文章

vue实现tab标签

vue实现tab标签

Vue 实现 Tab 标签的方法 使用动态组件和 v-for 渲染标签 通过 v-for 循环生成标签页标题,结合 v-bind:class 动态切换激活状态。使用 v-show 或动态组件 <…

vue实现倒计时抢券

vue实现倒计时抢券

Vue 实现倒计时抢券功能 核心逻辑 倒计时抢券功能需要结合时间计算、状态管理和界面交互。通过 Vue 的响应式特性和生命周期钩子,可以高效实现这一需求。 实现步骤 1. 数据准备 在 Vue 组件…

vue菜单实现

vue菜单实现

Vue 菜单实现方法 使用 Element UI 的菜单组件 Element UI 提供了现成的菜单组件,适合快速实现导航菜单。安装 Element UI 后,可以直接使用 el-menu 相关组件。…

tabbar 实现 vue

tabbar 实现 vue

在 Vue 中实现 TabBar 功能可以通过多种方式完成,以下是几种常见的方法: 使用 Vue Router 结合自定义组件 创建一个自定义的 TabBar 组件,结合 Vue Router 实现…

vue 实现拖拉

vue 实现拖拉

Vue 实现拖拽功能的方法 使用 HTML5 原生拖放 API HTML5 提供了原生的拖放 API,可以通过 draggable 属性、dragstart、dragend、dragover 和 dr…

vue 实现评分

vue 实现评分

Vue 实现评分功能 在 Vue 中实现评分功能可以通过多种方式完成,包括使用第三方组件库或自定义实现。以下是两种常见的方法: 使用第三方组件库(如 Element UI) Element UI 提…