jenkins部署发布uni-app的h5如何编译打包?

发布于 1周前 作者 wuwangju 来自 Uni-App

jenkins部署发布uni-app的h5如何编译打包?

  1. 在HBuilder X里能进行编译发行H5手机版

  2. 在Jenkins服务器里好不容易安装好vue-cli,安装vue3使用报错,只能安装vue2使用

    cnpm install -g vue-cli
    
  3. 安装好以后,进项目里执行cnpm install编译没问题

    Installed 2 packages  
    Linked 0 latest versions  
    Run 0 scripts  
    All packages installed (used 15ms(network 14ms), speed 0B/s, json 0(0B), tarball 0B)
    
  4. 执行cnpm run build:h5执行就报错

    npm ERR! missing script: build:h5 npm ERR!   
    A complete log of this run can be found in:
    

图片

开发环境 版本号 项目创建方式
HBuilder X - 编译发行H5手机版
Jenkins服务器 - 安装vue-cli(vue2)

16 回复

带佬们,帮帮我这个小运维吧,前端开发只会开发工具,我自己试了好几天都不成功


打包命令错了吧

回复 1***@qq.com: 我看官方文档,h5的打包用的这个命令

回复 Emira: 你看下package.json里面有没有这个命令

回复 1***@qq.com: 没有,需要给他加吗

回复 Emira: 嗯

回复 1***@qq.com: 我放弃了,根本改不成功。难受

为啥不支持呀。

这个问题我也有,搞了一周,还没有办法解决

除了uni-app cli项目,HBuilderX cli支持对uni-app普通项目打包。
参考:https://hx.dcloud.net.cn/cli/publish-h5

HBuilderX cli不支持linux吗?你们的jenkins都在windows上?

回复 w***@163.com: 目前HBuilderX仅支持Mac和Windows。

回复 DCloud_HB_WDL: 自动打包必须使用HBuilderX 的cli吗?

最后使用jenkins打包成功没有呢?也遇到了这个问题,尝试了网上的教程打包一直不成功

我这里运维也遇到这个问题,Jenkins独立打包HBuilder X的项目那位大佬会,分享一下,谢谢!

在Jenkins中部署并发布uni-app的H5项目,主要涉及到从代码仓库拉取代码、安装依赖、编译打包以及部署等步骤。以下是一个基于Jenkins Pipeline的示例脚本,展示了如何实现这一过程。

首先,确保Jenkins服务器上已经安装了Node.js和npm(uni-app的编译依赖)。

Jenkins Pipeline 脚本示例

pipeline {
    agent any

    environment {
        // 设置Node.js和npm的路径(如果Jenkins未全局配置)
        NODE_HOME = tool 'NodeJS' // 确保在Jenkins中配置了NodeJS工具
        PATH = "${NODE_HOME}/bin:${env.PATH}"
        
        // 仓库地址、分支、构建目录等
        REPO_URL = 'https://github.com/your-repo/uni-app-repo.git'
        BRANCH = 'main'
        BUILD_DIR = './uni-app-project'
    }

    stages {
        stage('Checkout') {
            steps {
                // 从Git仓库拉取代码
                git(url: "${REPO_URL}", branch: "${BRANCH}")
            }
        }

        stage('Install Dependencies') {
            steps {
                // 进入项目目录
                sh "cd ${BUILD_DIR}"
                
                // 使用npm安装依赖
                sh 'npm install'
            }
        }

        stage('Build H5') {
            steps {
                // 执行uni-app的H5编译命令
                sh "cd ${BUILD_DIR} && npm run build:h5"
                // 假设npm脚本中已经定义了"build:h5"来执行uni-app的H5编译
            }
        }

        stage('Deploy') {
            steps {
                // 假设你有一个部署脚本deploy.sh,用于将构建产物上传到服务器或CDN
                sh "cd ${BUILD_DIR}/dist/build/h5 && ./deploy.sh"
                
                // 示例deploy.sh内容(伪代码):
                // #!/bin/bash
                // scp -r * user@server:/path/to/deploy/
            }
        }
    }

    post {
        always {
            // 清理工作目录
            cleanWs()
        }
        success {
            // 构建成功后的操作,比如发送通知
            echo 'Build and Deploy Successful!'
        }
        failure {
            // 构建失败后的操作,比如发送错误通知
            echo 'Build or Deploy Failed!'
        }
    }
}

注意事项

  1. Node.js和npm配置:确保Jenkins全局工具配置中已添加Node.js,并在脚本中正确引用。
  2. npm脚本:在package.json中定义好H5编译的npm脚本,例如npm run build:h5
  3. 部署脚本deploy.sh脚本应根据你的实际部署需求编写,比如使用scp、rsync等工具上传文件。
  4. 权限问题:确保Jenkins用户对代码仓库、构建目录和部署脚本有适当的读写权限。

通过上述Pipeline脚本,Jenkins将自动完成uni-app H5项目的拉取、编译打包和部署工作。

回到顶部