Jenkins发布uniapp开发的H5的常见问题

分手后的思念是犯贱 2023-10-12 17:17 28阅读 0赞

最近在使用Jenkins实现uniapp开发的H5自动化发布时，遇到了一些常见问题。我在这里和大家分享一下我的解决方法。

问题1：如何在Jenkins中使用uniapp编译H5项目？

解决方案：安装Node.js和npm，并通过npm安装uni-app的依赖包。然后通过Jenkins的插件"NodeJS"创建全局环境，并添加环境变量。在Jenkins的构建步骤中，使用Node.js的指令"npm run build"编译并打包H5项目。

下面是具体的代码实现：

1.安装依赖包

npm install -g @vue/cli
    npm install -g @vue/cli-init
    npm install -g sass-loader node-sass
    npm install -g uni-app-cli

2.在Jenkins中配置"NodeJS"

在Jenkins的管理界面中，找到"Global Tool Configuration"，添加"NodeJS"工具，并设置安装路径。

3.在Jenkins的构建步骤中执行编译命令

vue-cli-service build --mode production

问题2：如何将H5项目发布到指定的服务器？

解决方案：使用Jenkins的"SSH Plugin"插件，通过SSH协议连接到远程服务器，并使用SCP命令将编译后的H5项目文件传输到服务器中指定的目录。

下面是具体的代码实现：

1.在Jenkins中安装"SSH Plugin"插件

在Jenkins的管理界面中，找到"Manage Plugins"，搜索"SSH Plugin"并安装。

2.在Jenkins中配置SSH服务器

在Jenkins的管理界面中，找到"SSH Server"，添加需要连接的SSH服务器的信息，包括IP地址、用户名和密码等，并设置使用的认证方式。

3.在Jenkins的构建步骤中使用SCP命令将H5项目文件上传到服务器

scp -r /path/to/local/project/dist/ user@remote:/path/to/remote/project

上面的命令中，"/path/to/local/project/dist/"是本地编译后的H5项目文件路径，"user@remote:/path/to/remote/project"是远程服务器的地址和文件路径。

问题3：如何在H5项目中使用CDN资源？

解决方案：在uniapp项目的配置文件中，设置"publicPath"属性为CDN资源的地址即可。在构建时，webpack会自动生成适应CDN资源的路径。

下面是具体的代码实现：

1.在项目的vue.config.js中添加配置

module.exports = {
      publicPath: 'https://cdn.example.com/',
    }

2.重新构建H5项目，webpack会自动使用CDN资源的路径。

以上就是我在使用Jenkins发布uniapp开发的H5项目时遇到的一些常见问题和解决方法。希望对大家有所帮助！

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关【uniapp】H5向uniapp通信存储数据——H5如何传递数据到uniapp方法的解决方案

最近在做H5号码认证无感登录，发现市场上的H5登录文档不健全，没有适合uniapp的，综合对比了多家，找了一家个推的接入，由于SDK、demo都是H5，精力有限，于是打算...

柔光的暖阳◎/ 2024年04月20日 22:30/ 0 赞/ 104 阅读

相关 Jenkins发布uniapp开发的H5的常见问题

最近在使用Jenkins实现uniapp开发的H5自动化发布时，遇到了一些常见问题。我在这里和大家分享一下我的解决方法。问题1：如何在Jenkins中使用uniapp编译H

分手后的思念是犯贱/ 2023年10月12日 17:17/ 0 赞/ 29 阅读

相关微信H5开发中常见的坑

坑点1：android、ios做分享时，若是hash路由模式下，无法加载正常url，发现分享的链接变成（[https://xxx.com/?from=grounmessa

素颜马尾好姑娘i/ 2023年07月04日 11:24/ 0 赞/ 11 阅读

相关 uniapp打包成H5遇到的坑

1：点击菜单栏发行，点击选择网站-H5手机版， ![format_png][] 2：在网站域名这一栏填写，网站域名，例如[www.xxx.com][]或者你的服务器的IP地

梦里梦外;/ 2023年02月27日 05:42/ 0 赞/ 22 阅读

相关 uniapp发布H5，怎样去掉标题栏？

参考：[https://blog.csdn.net/mangguodashiye/article/details/102485867][https_blog.csdn.net_

超、凢脫俗/ 2022年10月17日 04:20/ 0 赞/ 831 阅读

相关 H5静态页面的发布

一、下载node.js并安装。 https://nodejs.org/en/ 二、在服务器任意目录执行全局安装anywhere： npm i -g anywher

ゝ一纸荒年。/ 2022年10月12日 01:32/ 0 赞/ 226 阅读

相关 uniapp h5微信分享

安装微信sdk npm install jweixin-module --save var jweixin = require('jweixin-modul

落日映苍穹つ/ 2022年09月11日 11:19/ 0 赞/ 309 阅读

相关 uniapp 开发的H5 微信公众jssdk验签 invalid signature的问题

1. 根据微信jssdk文档说明配置传当前访问的url给后端 2. [验签地址][Link 1] https://mp.weixin.qq.com/debug/cgi-b

清疚/ 2022年09月10日 01:26/ 0 赞/ 262 阅读

相关 uniapp 解决H5跨域的问题

uniapp 解决h5跨域问题 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

快来打我*/ 2021年07月25日 12:00/ 0 赞/ 1508 阅读

相关 uniapp h5打包发布

1、在项目的manifest.json中 h5配置,配置页面标题即可 2、hbuilderX中点击发行网站-H5手机版 3、在打包后的文件夹中，命令行输入打开

缺乏、安全感/ 2021年07月24日 12:59/ 0 赞/ 725 阅读