HBuilderX下载安装以及打包uniapp项目

简介: 公司需要打包uniapp的项目为h5,自己之前没接触过,兴趣来了,根据百度搜索需要HBuilderX工具进行打包。

一、背景介绍


公司需要打包uniapp的项目为h5,自己之前没接触过,兴趣来了,根据百度搜索需要HBuilderX工具进行打包。


二、思路&方案


  • 1.下载安装HBuilderX
  • 2.HBuilderX中引入项目进行打包
  • 3.遇到问题,缺少插件,根据提示进行解决
  • 4.最终打包成功(打包操作)


三、过程


  • 1.下载安装HBuilderX(绿色解压即可食用)

1.1.地址:https://www.onlinedown.net/soft/1217175.htm

  • 2.HBuilderX中引入项目进行打包


386190657f644cb09def28bbd8892377.png


  • 3.遇到问题,缺少插件,根据提示进行解决

3.1.预编译器错误:代码使用了scss/sass语言,但未安装相应的编译器插件,请前往插件市场安装该插件

解决办法:三方地址点击即可跳转

3.2.0;31m–> LibSass 的二进制文件(F:\1.mark资料\100.工具\HBuilderX.2.7.14.20200618.full\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-ia32-57\binding.node)缺失,请执行下面3条命令下载对应版本的二进制文件:(有可能引发此错误的原因是 Node 版本变更)[0m

解决办法:三方地址点击即可跳转

  • 4.最终打包成功(附上h5打包步骤)


8e1de3bd71694836ab867cae8d742ff2.png

e4690bcffe6e4254a137779929a698d3.png

a3706d8623f34de39708a0bd8d615d57.png

2ecedeac3ca649d48525ad35cad71c2c.png


四、总结


  • 1.以及后续手动打包操作做成自动化的方式;
  • 2.后续还需要查一下通过其它工具是否可以支持打包操作
  • 3.一步一步遇到问题解决问题


五、升华


针对于没有接触过的内容第一反应想到的是学习它、搞定它,这是不是成长型思维?


引用文章:

https://blog.csdn.net/weixin_43848614/article/details/116601210

https://blog.csdn.net/weixin_39729729/article/details/121896135

相关文章
|
10月前
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
1178 18
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
466 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
10月前
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
638 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
11月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
1119 11
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
963 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
2408 3
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
345 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
Web App开发 JavaScript 小程序
【有问必答】搭建uniapp项目流程手把手教学
本文详细介绍了uniapp项目的搭建流程、组件引入、接口封装及常用配置。作者“狗哥”应博友之邀,分享了其日常开发经验,包括HBuilderX的使用、uview-ui和moment.js的引入与配置、环境变量设置、HTTP请求封装及API接口管理等内容。文章强调理解官方文档的重要性,并提供了具体步骤和示例代码,帮助读者快速掌握uniapp开发技巧。
439 0
【有问必答】搭建uniapp项目流程手把手教学

热门文章

最新文章