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

相关文章
|
3月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
354 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
322 3
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
115 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
Web App开发 JavaScript 小程序
【有问必答】搭建uniapp项目流程手把手教学
本文详细介绍了uniapp项目的搭建流程、组件引入、接口封装及常用配置。作者“狗哥”应博友之邀,分享了其日常开发经验,包括HBuilderX的使用、uview-ui和moment.js的引入与配置、环境变量设置、HTTP请求封装及API接口管理等内容。文章强调理解官方文档的重要性,并提供了具体步骤和示例代码,帮助读者快速掌握uniapp开发技巧。
49 0
【有问必答】搭建uniapp项目流程手把手教学
|
4月前
|
移动开发 开发框架 JavaScript
在UniApp的H5项目中,生成二维码和扫描二维码的操作处理
在UniApp的H5项目中,生成二维码和扫描二维码的操作处理
|
4月前
|
开发框架 移动开发 前端开发
基于HBuilderX+UniApp+ThorUI的手机端前端开发处理
基于HBuilderX+UniApp+ThorUI的手机端前端开发处理
|
5月前
|
开发者 iOS开发
uniapp打包苹果应用到哪里去获取私钥证书和证书profile文件
ios的应用,分两种安装方式,一种是上架app store的安装方式,一种是上传到一些应用内测的平台,进行扫码安装。
149 4
|
4月前
|
移动开发 JavaScript 前端开发
【绝技揭秘】从零到英雄:解锁UniApp H5项目中的二维码生成与扫描秘籍,让你的应用瞬间变身扫码达人!
【8月更文挑战第20天】二维码在移动应用中无处不在。本文详述了在UniApp H5项目中实现二维码生成与扫描的方法。通过对比插件`uni-app-qrcode`和JavaScript库`qrcode-generator`生成二维码的方式,以及使用插件`@juggle/resize-observer`和HTML5的MediaDevices API进行扫描的技术方案,帮助开发者挑选最佳实践。无论是插件的便捷性还是原生JavaScript的灵活性,都能满足不同项目需求。
139 0
|
4月前
|
移动开发 前端开发 JavaScript
UniApp H5项目大揭秘:高效生成与扫描二维码的终极策略,让你的应用脱颖而出!
【8月更文挑战第3天】UniApp让开发者能以Vue.js构建跨平台应用。在H5项目中,通过第三方库如qrcodejs2可轻松生成二维码,代码简洁易集成;或用Canvas API获得更高灵活性。扫描方面,H5+ API适合App环境,而纯H5项目则需前端库加后端服务配合。不同方法各有优势,应按需选择以优化体验。
313 0