当前位置:首页 > 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 的实现过程 Vue 的实现过程可以分为多个核心模块,包括响应式系统、虚拟 DOM、模板编译等。以下是 Vue 的主要实现过程分析。 响应式系统 Vue 的响应式系统基于 Object.def…

vue实现类别

vue实现类别

Vue 实现类别的几种方法 在 Vue 中实现类别功能可以通过多种方式完成,以下是一些常见的方法: 使用 v-bind:class 动态绑定类名 通过对象语法或数组语法动态绑定类名,根据条件添加或移…

vue 实现过滤

vue 实现过滤

Vue 实现过滤的方法 在 Vue 中实现过滤功能可以通过多种方式完成,包括使用计算属性、自定义过滤器、第三方库等。以下是几种常见的实现方法: 使用计算属性进行过滤 计算属性是 Vue 中最常用的过…

vue nexttrick实现

vue nexttrick实现

Vue 中 nextTick 的实现原理 nextTick 是 Vue 提供的一个异步方法,用于在下次 DOM 更新循环结束之后执行延迟回调。它利用了 JavaScript 的事件循环机制,确保回调在…

vue实现复制

vue实现复制

Vue 实现复制功能 在 Vue 中实现复制功能可以通过多种方式完成,以下是几种常见的方法: 方法一:使用 Clipboard API Clipboard API 是现代浏览器提供的一种原生 AP…

vue实现vmodel

vue实现vmodel

Vue 实现 v-model Vue 的 v-model 是一个语法糖,用于在表单元素或组件上实现双向数据绑定。以下是其实现方式和原理的详细说明。 在表单元素上使用 v-model v-model…