当前位置:首页 > 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实现多选联动的方法 使用v-model绑定数组 在Vue中,可以通过v-model绑定一个数组来实现多选联动。当复选框被选中或取消选中时,数组会自动更新。 <template>…

vue实现自动翻译

vue实现自动翻译

Vue 实现自动翻译的方法 在 Vue 项目中实现自动翻译功能可以通过多种方式完成,以下是几种常见的方法: 使用第三方翻译 API 注册并获取翻译 API 的密钥(如 Google Translat…

vue实现路由导航

vue实现路由导航

路由导航的实现方式 在Vue中,路由导航主要通过Vue Router实现。Vue Router是Vue.js官方的路由管理器,用于构建单页面应用(SPA)。 基本路由配置 安装Vue Router…

vue前端实现登录

vue前端实现登录

实现登录功能的基本流程 使用Vue实现登录功能需要结合前端框架和后端API交互。以下是一个典型的实现方案: 安装必要依赖 确保项目已安装axios用于HTTP请求: npm install a…

vue实现录播播放

vue实现录播播放

Vue 实现录播播放 使用 video.js 实现 安装 video.js 和相关的 Vue 适配器: npm install video.js @videojs-player/vue 在 Vue…

vue实现多层评论回复

vue实现多层评论回复

Vue 实现多层评论回复 数据结构设计 多层评论通常采用嵌套结构,每个评论对象包含子评论数组。示例数据结构如下: comments: [ { id: 1, content: '…