hbuilder打包vue项目生成apk

HBuilderX打包Vue项目生成APK完整指南

一、准备工作

1. ‌环境准备‌：

   • 下载安装最新版HBuilderX（当前为2025年7月版本）
   • 确保已安装Node.和npm/yarn
   • 准备已开发完成的Vue项目

2. ‌Vue项目配置调整‌：

   • 在vite.config.或vue.config.中设置base: './'
   • 确保路由模式为hash模式（createWebHashHistory）
   • 检查所有静态资源路径是否为相对路径‌12

二、详细打包步骤

1. 生成Vue项目生产包

bashCopy Code

npm run build

生成dist文件夹，包含index.html和静态资源‌3

2. 创建HBuilderX项目

1. 打开HBuilderX，选择"文件"→"新建"→"项目"
2. 选择"5+App"项目类型
3. 输入项目名称和存储路径‌4

3. 替换项目内容

1. 删除新建项目中默认的css、img、文件夹
2. 将Vue项目dist文件夹中的内容复制到HBuilderX项目根目录
3. 保留manifest.on文件进行配置‌5

4. 配置manifest.on

还需配置启动界面、模块权限等‌67

5. 执行云打包

1. 点击菜单"发行"→"原生App-云打包"
2. 选择Android平台
3. 使用DCloud公共测试证书或自有证书
4. 等待打包完成（通常5-10分钟）‌89

三、常见问题解决方案

1. 白屏问题

• ‌原因‌：路径配置错误或路由模式不当
• ‌解决方案‌：
  • 确认base: './'配置正确
  • 使用hash路由模式
  • 检查控制台报错调整资源路径‌1011

2. 返回键失效

在public/index.html中添加：

javascriptCopy Code

document.addEventListener('plusready'function() {
  var first = null;
  plus.key.addEventListener('backbutton'function() {
    if(window.history.length > 1) {
      window.history.go(-1);
    } else {
      // 双击退出逻辑
      if(!first) {
        first = new Date().getTime();
        plus.nativeUI.toast('再按一次退出应用');
        setTimeout(() => { first = null }1000);
      } else if(new Date().getTime() - first 

:::ml-data{name=citationList}
```on
[{"abstract":"首先,你需要下载并安装HbuilderX,然后创建移动APP项目。接着,将Vue项目内容导入到APP项目中,并调整manifest.on配置。最后,通过云端打包服务生成APK安装包,简化了开发者对环境配置的需求,提高了打包效率。","url":"https://blog.csdn.net/weixin_44090040/article/details/109047848","text":"使用Hbuilder X将Vue项目打包成app(Android)","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t8.baidu.com/it/u=4036238958,4208116633&fm=217&app=126&f=JPEG?w=800&h=406&s=ADC67D321B1A544958D9E0490300F0B1","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"使用Hbuilder X将Vue项目打包成app(Android)","thumbnail":"http://t8.baidu.com/it/u=4036238958,4208116633&fm=217&app=126&f=JPEG?w=800&h=406&s=ADC67D321B1A544958D9E0490300F0B1","linkInfo":{"href":"https://blog.csdn.net/weixin_44090040/article/details/109047848"}},{"abstract":" 一、背景 如果一个前端想快速开发app,最快的方式应该是用uni-app。但我之前脑袋秀逗了,只想到用vue3开发h5,然后部署之后把这个h5的链接打包成apk,这种方式会存在一个问题,当手机没网连不上服务器的时候,页面都不会显示,体验感很不好(如果已有存在的用android开发的app,用webview嵌入几个网页没问题,就算没网,也可以loading显示,但我们之前没有已开发的app)。但如果用uni-app重新开发时间又来不及,网上搜了搜,有方法能直接把vue3打包成apk,这种方式和直接打包h5链接生成的apk的区别是前者是相当于把所有资源打包在apk包里,支持离线模式,当没网状态下也会有页面显示,但若需要和后端交互,就还是需要有网才能交互成功。 二、具体打包方式 能用Cordova、Capacitor、HBuilderX直接将vue3打包成apk,稍微了解了下还是觉得HBuilderX最简单。 三、具体方式 3.1、HBuilderX下载 1、进入官网www.dcloud.io/hbuilderx.h…,点击下载,这个包是免安装的,下载后解压即可,双击HBuilderX.exe即可启动程序。 3.2、新建项目 点击文件=》新建=》项目,新建一个“5+APP”项目,输入项目名称。 3.3、打包vue3项目 1、在vite.config.中添加\"base:'./\"。 如果不添加那么打包生成的dist/index.html都会是下图这种路径,导致访问不到添加了这一行后会是图三这种路径。 2、把路由中的createWebHistory改为createWebHashHistory。这是因为原生容器的文件系统结构与路由匹配机制的差异。这里设置不当会导致白屏。 3、修改“.env.production”文件,将VITE_AOO_BASE_API修改后端网址,即在nginx中prod-api代理的网址。这是用于和后端的接口交互,因为不存在nginx去代理了。 4、运行npm run build生成dist包。 3.4、将Vue3打包到项目里 1、删除之前生成的5+APP项目下的一些文件,只留下unpackage文件夹和manifest.on文件。 2、将dis","url":"https://juejin.cn/post/7513409920818528307","text":"vue3项目用HbuilderX打包成apk详细步骤 ","source":{"logo":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3995954774,1214072087&fm=195&app=88&f=JPEG?w=200&h=200","name":"掘金开发者社区"},"icon":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3995954774,1214072087&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t7.baidu.com/it/u=2047143688,3486549857&fm=217&app=126&f=JPEG?w=800&h=265&s=A09A55322AD9980D71E9F541030060E9","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue3项目用HbuilderX打包成apk详细步骤 ","thumbnail":"http://t7.baidu.com/it/u=2047143688,3486549857&fm=217&app=126&f=JPEG?w=800&h=265&s=A09A55322AD9980D71E9F541030060E9","linkInfo":{"href":"https://juejin.cn/post/7513409920818528307"}},{"abstract":" 首先进入vue项目,运行npm run build,拿到dist包 点击打开index.html,正常情况可以正常的显示项目内容。如果页面为空白,大概率是路径问题。 f12打开控制台,检查是否有路径报错。如果有,来到vue项目的vite.config.,将build对象路径改为当前目录(./) 加上这一行代码即可。 再次进行打包,打开index.html。这里我遇到一个bug,打开之后发现样式乱了。但布局还是对的,宽高及字体大小出现了问题。 首先想到字体和元素宽高的单位,项目中使用的是rem,而rem是相对于根元素的单位。打包之后挂载的根元素丢失,导致样式错乱。在index.html手动添加以下代码: <> html { font-size: 100px; } </> AI写代码javascript 运行 问题解决~进行下一步 打开Hbuilderx,新建5+App项目 打开项目目录,把,img,css删掉 把刚刚在vue项目build的dist包里的assets和index.html拖进去替换掉。如下图 (如果npmrun build的是static,把对应的,img,css文件夹替换掉即可) 完成~可以进行打包了","url":"https://blog.csdn.net/2201_75829410/article/details/146502428","text":"使用Hbuilderx将vue项目打包为apk","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t9.baidu.com/it/u=874969580,3322549847&fm=217&app=126&f=JPEG?w=787&h=733&s=AAA2F74A92B6B36E0A51150B0000E0C0","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"使用Hbuilderx将vue项目打包为apk","thumbnail":"http://t9.baidu.com/it/u=874969580,3322549847&fm=217&app=126&f=JPEG?w=787&h=733&s=AAA2F74A92B6B36E0A51150B0000E0C0","linkInfo":{"href":"https://blog.csdn.net/2201_75829410/article/details/146502428"}},{"abstract":" 一.打包 1.在vue.config,中加入 publicPath: ‘./’配置,防止打包后产生空白页 2.在axios.中的默认服务器配置直接写服务器名称,在router里面配置路由模式为hash 如: 3.无需配置跨域,跨域只有开发过程中自己电脑与服务器端口号开的不一致,才会产生,而打包成app则不会出现跨域问题. 4.使用npm run build 打包vue项目,生成dist文件,如图 4.打开HubuildX.新建H5+项目,如图 5.生成如下文件,将红色框子内文件删除,里面对应内容替换为刚刚打包后的dist文件内的 6.mainifest.on中的配置文件根据需求配置,(不咋需要配置),这样就具备了打包的工作 二.演示 1.真机使用usb开发者选项演示 1.1点击如图(前提手机连接数据线,调整到开发者模式,允许接收文件),弄完即可手机查看效果 2.打包成app 2.1 点击如图 2.2 配置自己的信息","url":"https://blog.csdn.net/weixin_50382901/article/details/123672124","text":"vue项目使用hbuildX打包成app","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t8.baidu.com/it/u=3287475938,2553792399&fm=217&app=126&f=JPEG?w=658&h=370&s=BA81A14C0AF4864F5E59FD0B0300E0C3","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue项目使用hbuildX打包成app","thumbnail":"http://t8.baidu.com/it/u=3287475938,2553792399&fm=217&app=126&f=JPEG?w=658&h=370&s=BA81A14C0AF4864F5E59FD0B0300E0C3","linkInfo":{"href":"https://blog.csdn.net/weixin_50382901/article/details/123672124"}},{"abstract":" 一、Vue项目利用 HBuilder 打包成 apk 安装包 1.HBuilder 新建一个项目 选择5+App,模板选择默认模板。 2.vue项目(白屏问题) a.config文件夹下的index.文件改成:assetsPublicPath: ‘./’(dev下的不用改) b.src里边router/index.路由配置里边默认模式是hash,如果是history模式,打开会出现空白页。所以mode模式改为hash或者直接把模式配置删除,让它默认的就行 。 c.vue.config. 文件,设置 publicPath:‘./’ d.打包命令:npmrun build 生成dist文件夹 3.把dist文件夹下的所有资源复制到刚刚新建的Hbuild项目app下,目录结构如下: 二、配置 manifest.on文件 注:配置文件可以直接使用默认,只改基础配置,也可,根据需求设置,如下仅是参考。 1.基础配置 必填:应用标识、应用名称、应用版本号、应用入口页面(首页)地址 横竖屏设置,根据需求设置。 2.图标配置 就是该 APP 显示在手机界面上的图片,非必选。 3.启动界面配置 根据需求勾选,下面的选择仅可做参考。 4.模块配置 根据需求勾选,不过有的打包的时候有限制。 5.权限配置 根据需求勾选,下面的选择仅可做参考。 6.App 常用其他配置 根据需求勾选,下面的选择仅可做参考。","url":"https://blog.csdn.net/weixin_46243213/article/details/133638261","text":"HBuilder 打包","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t7.baidu.com/it/u=2465001133,1627746240&fm=217&app=126&f=JPEG?w=800&h=650&s=E5B2AC76010F614B40C9414A0000D0F3","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"HBuilder 打包","thumbnail":"http://t7.baidu.com/it/u=2465001133,1627746240&fm=217&app=126&f=JPEG?w=800&h=650&s=E5B2AC76010F614B40C9414A0000D0F3","linkInfo":{"href":"https://blog.csdn.net/weixin_46243213/article/details/133638261"}},{"abstract":" 一、测试项目是否可以正确运行 指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行 二、修改路径(assetsPublicPath: './') 打开我们config中的文件,修改assetsPublicPath的路径为\"./\"(下图的右下角位置) 三、打包文件 指令:npm run build 打包后会生成dist文件 四、把dist文件变成app模式 在HBuilder中点击文件,打开目录,找到我们项目中的dist文件,确定。 然后我们会看到这样的带着 W 的文件 五、转换APP 右键dist,点击转换成App(T) 六、在manifest.on里面配置APP名字及APP图标 我们在上一步会生成一个manifest.on文件,打开它,我们在这里操作 app名字:就是应用名称(这里我写的是思源000) app图标:现在下面点击图标配置,然后选择图片放上去(图片只能为PNG格式,通过手动改后缀是不可以的),在这里我选择的是圣诞小人的图标 七、生成apk 1.点击发行,发行为原生安装包 2.点击使用DCloud公用证书,点击打包 好了打包成apk文件了,把这个安装到手机上咱们就可以用了,嘿嘿!!!","url":"https://blog.51cto.com/u_16099209/9186331","text":"hbuild vue打包ios 用hbuilder打包vue","source":{"logo":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3385518650,4195902768&fm=195&app=88&f=JPEG?w=200&h=200","name":"51CTO博客"},"icon":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3385518650,4195902768&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t7.baidu.com/it/u=1864780562,1772347318&fm=217&app=126&f=JPEG?w=616&h=562&s=5DA03C726B5E66CC587C40DD0300C0F2","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"hbuild vue打包ios 用hbuilder打包vue","thumbnail":"http://t7.baidu.com/it/u=1864780562,1772347318&fm=217&app=126&f=JPEG?w=616&h=562&s=5DA03C726B5E66CC587C40DD0300C0F2","linkInfo":{"href":"https://blog.51cto.com/u_16099209/9186331"}},{"abstract":" 1.参考文档 HbuilderCloud HBuilderX安卓离线打包教程全一览——5+app DCLOUD社区 2.材料准备 AndroidStudio HBuilderX SDK(网盘提取码:neqx,最新请访问:https://nativesupport.dcloud.net.cn/AppDocs/download/android) 3.打包Web项目 项目打包 将Vue 或者 React 使用的webpack把代码项目进行打包 如果没玩过 MVVM框架随便什么hello world的html项目也可以,不一定非要打包只要网页能打开就行这里以Vue+Webpack为例:打包之后生成 index.html 和 dist目录 我这里的项目浏览器打开之后是移动端的html5页面,如下图: 注意这里只是页面,不是APP,移动端页面,接下来的任务就是要把这个html开发的页面打包成安卓App HbuilderX打包 打包好之后,打开 HbuilderX创建5+App项目 创建后,将左侧默认文件除了 manifest其他都删掉,然后把刚刚打包好的 (我的是index.html 和 build)放到项目目录下 4.Manifest配置 点击manifest.on 进行配置 Appid Appid需要去Dcloud申请一下,注册一个账号就行,申请地址如下,免费的 https://dev.dcloud.net.cn/app/index?type=0 应用是否全屏 这里的全屏是类似玩王者荣耀那样,直接占据整个屏幕,电源时间状态栏都没有的那种,这里我不勾选接下来配置沉浸式体验,就是顶部时间电源状态栏弄成透明的那种,看起来会比较舒服 图标配置 图标配置可以自动生成,也可以先不生成,后面我们可以用IDE创建自定义图标 启动配置 配置如下图 模块配置 我们这里简单点,全部模块都不用,下来大家可以自己尝试勾选玩一下 权限配置 按照默认的选项","url":"https://blog.csdn.net/talaogong/article/details/139311104","text":"网页应用打包安卓App (详细教程)","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t8.baidu.com/it/u=3443386150,3862612334&fm=217&app=126&f=JPEG?w=684&h=365&s=C010ED3A1D004449547D98C8020050B3","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"网页应用打包安卓App (详细教程)","thumbnail":"http://t8.baidu.com/it/u=3443386150,3862612334&fm=217&app=126&f=JPEG?w=684&h=365&s=C010ED3A1D004449547D98C8020050B3","linkInfo":{"href":"https://blog.csdn.net/talaogong/article/details/139311104"}},{"abstract":" 一、基础离线打包,无引入模块,无原生插件 1. HbuilderX新建项目,开发者后台申请证书和离线key 2.HbuilderX生成本地包 二、Android Studio配置 1.下载离线SDK,解压,SDK版本需要和HbuilderX 版本一致,否则打包以后,会提示版本不一致 2.使用Android Studio导入离线SDK中的【HBuilder-Integrate-AS】​编辑 3.加载完成后,左上角选择【project】查看完整目录 4.找到Hbuilder生成的本地包,复制整个文件夹 5. 回到Android Studio,将本地包复制到该文件夹下 6.配置离线key,回到dcloud后台,找到查看离线key,复制 7.找到 AndroidManifest.xml,将离线key粘贴到下图位置 8.配置appid,hbuider源码视图复制appid到Android Studio如图位置 9. Android Studio 打包文件build.gradle配置 10. 证书配置 11.修改app名称和图标 12.打包","url":"https://blog.csdn.net/qq_33619812/article/details/149286128","text":"uniapp离线打包安卓apk详细教程,从HbuilderX新建项目到Android Studio详细配置(一)-CSDN博客","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"uniapp离线打包安卓apk详细教程,从HbuilderX新建项目到Android Studio详细配置(一)-CSDN博客","linkInfo":{"href":"https://blog.csdn.net/qq_33619812/article/details/149286128"}},{"abstract":" 第一步: 在vue.config.中加入 baseUrl: './'代码示例如下图: 修改public目录下index.html文件把全局配置的地址改成域名。如下图 修改src/utils/request. 把axios 的baseURL修改一下,如下示例图: 第二步: 在HBuilder中选择文件—>打开目录,选择build后的dist文件,如下图: 第三步: 选中项目,右击选择转换成移动App 第四步: 选中项目,右击选择发行,弹出来菜单,选择第一项。出现一个窗口如下图: 点击打包,即可完成打包","url":"https://doc.jeecg.com/2044161","text":"HBuilder打包APP手机端安装配置教程 · JeecgBoot 开发文档 · 看云","source":{"logo":"http://t9.baidu.com/it/u=178175333,3907884239&fm=217&app=126&f=JPEG?w=800&h=671&s=A8D2A346DAA6B36C1ED5C40F0000E0C1","name":"JeecgBoot"},"icon":"http://t9.baidu.com/it/u=178175333,3907884239&fm=217&app=126&f=JPEG?w=800&h=671&s=A8D2A346DAA6B36C1ED5C40F0000E0C1","poster":"http://t9.baidu.com/it/u=178175333,3907884239&fm=217&app=126&f=JPEG?w=800&h=671&s=A8D2A346DAA6B36C1ED5C40F0000E0C1","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"HBuilder打包APP手机端安装配置教程 · JeecgBoot 开发文档 · 看云","thumbnail":"http://t9.baidu.com/it/u=178175333,3907884239&fm=217&app=126&f=JPEG?w=800&h=671&s=A8D2A346DAA6B36C1ED5C40F0000E0C1","linkInfo":{"href":"https://doc.jeecg.com/2044161"}},{"abstract":" 1.npm run build 生成的dist包内部的index.html文件建议先右键用本地浏览器运行一下 ,是否能成功加载不然可能会因为资源位置问题访问失败。例如下图报错(要首先确保你得dist 能够正常运行 其次才是包装成apk 后才能成功展示 不然可能会以为是apk 的问题——菜鸟血泪史) 解决办法: vue 打包之后 index.html 报错 Failed to load resource: net::ERR_FILE_NOT_FOUND-CSDN博客文章浏览阅读929次。因此 我们需要改一下打包后html访问静态资源的路径。找到项目中 根目录下的vue.config.。打包完成后顺手打开了 index.html。再次打开index.html 就跑起来了。因为 打包你要的静态资源都在同目录下。在module.exports下加入。而默认访问的静态资源路径是有问题的。这是个路径找不到的问题。https://blog.csdn.net/weixin_45966674/article/details/130326612 vue项目打包后白屏或者报错Failed to load resource: net::ERR_FILE_NOT_FOUND以及图标为小方框 - tongzhe2006 - 博客园 2. 确保dist 里的文件能够正常访问后 按照以下链接进行apk 的设置。","url":"https://blog.csdn.net/aaaarrrrrr/article/details/145683184","text":"【vue 项目 打包成apk,运行在android环境遇到问题详解】","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t7.baidu.com/it/u=2169491095,946869080&fm=217&app=126&f=JPEG?w=745&h=547&s=90A85C32115F55CA58F161CA000050B2","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"【vue 项目 打包成apk,运行在android环境遇到问题详解】","thumbnail":"http://t7.baidu.com/it/u=2169491095,946869080&fm=217&app=126&f=JPEG?w=745&h=547&s=90A85C32115F55CA58F161CA000050B2","linkInfo":{"href":"https://blog.csdn.net/aaaarrrrrr/article/details/145683184"}},{"abstract":" 1.打开Hbuider,点击左上角文件,点击新建,然后点击项目。项目类型要选择5+App,项目名称和地址自己设置。 2.创建完成后,可以看到css、img、、upackage文件夹和index.html、manifest.on css、img、、index.html这些可以删除替换成我们写的代码 。(记住html文件最好也是写index) 在终端执行打包 npm run build ,获得发布包 dist 文件夹,其中包含所需的这些文件。 3.点击manifest.on,这里面可以看到基础配置、图像配置、七大界面配置、模块配置、权限配置、App常用其他设置、源码视图。 3.1 基础配置这一块直接看着配置名称填即可","url":"https://blog.csdn.net/qq_58648235/article/details/127165220","text":"Hbuilder将vue项目打包为app(具体步骤和注意点)_vue开发的软件怎么在hbuilder上打包-CSDN博客","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t9.baidu.com/it/u=865382568,515469866&fm=217&app=126&f=JPEG?w=800&h=475&s=BA93E14C3FAEB76C4C55040F0300E0C9","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"Hbuilder将vue项目打包为app(具体步骤和注意点)_vue开发的软件怎么在hbuilder上打包-CSDN博客","thumbnail":"http://t9.baidu.com/it/u=865382568,515469866&fm=217&app=126&f=JPEG?w=800&h=475&s=BA93E14C3FAEB76C4C55040F0300E0C9","linkInfo":{"href":"https://blog.csdn.net/qq_58648235/article/details/127165220"}},{"abstract":" 一、前期准备 安装HBuilderX 首先,你需要从HBuilderX官网下载并安装HBuilderX开发工具。HBuilderX支持Windows、macOS和Linux系统,你可以根据自己的操作系统选择合适的版本。 创建Vue或H5项目 如果你还没有Vue或H5项目,可以使用HBuilderX创建一个新的项目。HBuilderX内置了丰富的模板,可以帮助你快速搭建项目框架。 二、项目配置 配置manifest.on 在HBuilderX中打开你的项目,找到项目根目录下的manifest.on文件。这个文件用于配置App的基本信息和权限。你需要根据自己的需求填写相关信息,如App名称、图标、启动页等。 配置App模块 在manifest.on中,找到“App模块配置”部分,勾选“打包App”选项。然后,根据你的需求选择目标平台(如Android、iOS等),并配置相应的参数。 三、打包流程 选择打包目标 在HBuilderX的顶部菜单栏中,点击“发行”按钮,选择“原生App云打包”或“原生App本地打包”。根据你的需求选择合适的打包方式。 配置打包参数 在弹出的打包配置窗口中,你需要填写一些必要的参数,如App名称、包名、版本号等。同时,你还可以选择是否生成安装包、是否压缩代码等选项。 开始打包 配置完成后,点击“确定”按钮开始打包。打包过程中,HBuilderX会自动生成相应的原生代码和资源文件,并编译成安装包。 下载和安装 打包完成后,你可以在HBuilderX的“发行”界面下载生","url":"https://developer.baidu.com/article/details/3301549","text":"使用HBuilderX将Vue或H5项目打包成App","source":{"logo":"https://gips3.baidu.com/it/u=3236075928,3550158464&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f48_48","name":"百度开发者中心"},"icon":"https://gips3.baidu.com/it/u=3236075928,3550158464&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f48_48","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"使用HBuilderX将Vue或H5项目打包成App","linkInfo":{"href":"https://developer.baidu.com/article/details/3301549"}},{"abstract":" 问题:首页白屏,解决方案:将路由模式从history改成hash模式,vue-cli 4以上版本在vue.config.中添加publicPath: ‘./’ constrouter=newVueRouter({// mode: 'history',mode:'hash',}); AI写代码javascript 运行 1 2 3 4 exportdefault{publicPath:'./'} AI写代码javascript 运行 1 2 3 2.问题:接口请求失效,解决方案:将所有的接口请求加上完整地址,例如利用axios的情况,在request函数的请求参数url中加上baseUrl letbaseUrl='http://xx.xxxx.com';exportdefault{login(data={}){returnrequest({method:'POST',url:baseUrl+'/api/v1/login',data:JSON.stringify(data)})},} AI写代码javascript 运行 1 2 3 4 5 6 7 8 9 10 11 3.问题:图片路径失效,解决方案:需要更改图片路径为绝对路径(可能需要,在我的工作场景并未出现需要更改路径的情况),参考地址:HBuilder 用Vue封装App 提示图片路径不对 4.问题:回退操作导致直接退出应用,解决方案:在需要解决该问题的页面添加以下脚本(我是直接放在index.html)","url":"https://blog.csdn.net/qq_44355500/article/details/120901571","text":"HbuilderX打包vue工程为Android apk和aab文件遇到的坑","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t9.baidu.com/it/u=429975970,3315185853&fm=217&app=126&f=JPEG?w=800&h=1040&s=00924D32099EC5CE0CE529DB030090B2","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"HbuilderX打包vue工程为Android apk和aab文件遇到的坑","thumbnail":"http://t9.baidu.com/it/u=429975970,3315185853&fm=217&app=126&f=JPEG?w=800&h=1040&s=00924D32099EC5CE0CE529DB030090B2","linkInfo":{"href":"https://blog.csdn.net/qq_44355500/article/details/120901571"}},{"abstract":" 1、修改vue项目配置(下面的是基于脚手架3方式创建的项目的打包方式) 1.1打开cmd(管理员方式) 1.2输入 vue ui,进入脚手架管理界面 1.3点击配置进入配置界面 1.4修改公共路径为./ 1.5进入vue.config.文件检查是否修改成功 2、运行npm run build进行vue项目打包 3、将打包生成的dist文件夹复制到hbuilderx里面 4、打开hbuilderX新建一个5+App项目 5、删除生成的文件和文件夹只留一个manifest.on文件(打包配置文件) 6、将dist文件下面的文件全部放到项目根目录下,如上图。 7、右键项目,点击发行——>原生App云打包 8、填写相关信息,Android证书获取方式自行百度,也可以私聊我,点击确定即可。 9、会返回一个apk文件下载路径,自行下载安装即可。","url":"https://cloud.tencent.com/developer/article/2430628","text":"【问题篇】打包Vue-cli3创建的vue项目成App的apk文件","source":{"logo":"http://t8.baidu.com/it/u=2011104369,62116453&fm=217&app=126&f=JPEG?w=800&h=275&s=0D70C20221FBAE210EC1A507030060C3","name":"腾讯云"},"icon":"http://t8.baidu.com/it/u=2011104369,62116453&fm=217&app=126&f=JPEG?w=800&h=275&s=0D70C20221FBAE210EC1A507030060C3","poster":"http://t8.baidu.com/it/u=2011104369,62116453&fm=217&app=126&f=JPEG?w=800&h=275&s=0D70C20221FBAE210EC1A507030060C3","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"【问题篇】打包Vue-cli3创建的vue项目成App的apk文件","thumbnail":"http://t8.baidu.com/it/u=2011104369,62116453&fm=217&app=126&f=JPEG?w=800&h=275&s=0D70C20221FBAE210EC1A507030060C3","linkInfo":{"href":"https://cloud.tencent.com/developer/article/2430628"}},{"abstract":" 1、打包 通过打包命令将vue3项目打包成一个dist文件夹 注意:一般的打包命令为npm run build,特殊设置的修改一下打包命令  2、解决打包后的文件的白屏问题。 有时打包后的文件运行出现白屏问题,可能是绝对路径导致的,在vite.config.文件中配置base:'./' 图一 解决白屏问题 二、打包成apk 1、创建“5+App”项目 在hbuilderx 中新建项目,选择“5+App”,然后填写项目名称,点击底部的\"创建\"按钮,步骤如下图: 图二 创建 5+app项目 2、打包文件移动 将打包的dist中的文件全部复制到新建图一的根目录中 3、生成apk文件 点击顶部 \"发行\",选择 \"原生App-云打包\",具体内容如下,之后静静等待打包成apk 图三 打包apk 步骤 三、生成apk 生成apk文件,然后将apk文件安装到手机上进行运行,测试一下运行结果","url":"https://www.jb51.net/javascript/320544dby.htm","text":"vue3项目打包成apk(android)详细图文教程","source":{"logo":"http://t7.baidu.com/it/u=3531172197,3077569247&fm=217&app=126&f=JPEG?w=800&h=349&s=68F2A3445FE0996818F85109030070C0","name":"脚本之家"},"icon":"http://t7.baidu.com/it/u=3531172197,3077569247&fm=217&app=126&f=JPEG?w=800&h=349&s=68F2A3445FE0996818F85109030070C0","poster":"http://t7.baidu.com/it/u=3531172197,3077569247&fm=217&app=126&f=JPEG?w=800&h=349&s=68F2A3445FE0996818F85109030070C0","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue3项目打包成apk(android)详细图文教程","thumbnail":"http://t7.baidu.com/it/u=3531172197,3077569247&fm=217&app=126&f=JPEG?w=800&h=349&s=68F2A3445FE0996818F85109030070C0","linkInfo":{"href":"https://www.jb51.net/javascript/320544dby.htm"}},{"abstract":" 1、首先以及必须,将config文件夹里的index.文件中assetsPublicPath由'/'改为 './'。 2、修改build文件下的utils.文件加如下图publicPath:'../../'路径,是为了显示css中背景图片。 这个曾经是我遇到的一个坑,很多文章说publicPath:'./',这会造成背景图片不显示的问题,所以这里一定要改成publicPath:'../../'。 3、修改build文件下的webpack.prod.conf.文件output中加如下图publicPath:'./'路径 4、npm run build 打包生成dist文件 。 使用HBuiderX","url":"https://blog.csdn.net/zhiyuanfl/article/details/90712115","text":"使用HBuilderX 打包 vue 项目 为 App 的步骤","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t8.baidu.com/it/u=1695323421,2403664815&fm=217&app=126&f=JPEG?w=696&h=306&s=C9E283460BE09D684A78F801030070C1","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"使用HBuilderX 打包 vue 项目 为 App 的步骤","thumbnail":"http://t8.baidu.com/it/u=1695323421,2403664815&fm=217&app=126&f=JPEG?w=696&h=306&s=C9E283460BE09D684A78F801030070C1","linkInfo":{"href":"https://blog.csdn.net/zhiyuanfl/article/details/90712115"}},{"abstract":" 1.vue项目npm run build 得到dist文件夹 dist文件夹内容示例 2.hbuilderX中创建空的5+APP项目 新建5+APP项目","url":"https://download.csdn.net/blog/column/11153077/125506064","text":"vue项目通过hbuilderx打包为apk","source":{"logo":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2303442982,1374529651&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN下载"},"icon":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2303442982,1374529651&fm=195&app=88&f=JPEG?w=200&h=200","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue项目通过hbuilderx打包为apk","linkInfo":{"href":"https://download.csdn.net/blog/column/11153077/125506064"}},{"abstract":" 1.官网下载最新的Hbuilderx。 2.准备好一个包含manifest.on的Vue项目,这时会生成manifest.on文件,打开进行详细设置,如图标、描述等详情设置,设置完成后,保存。 3.首先去App Uploader找到开发证书(类型是development的),点击P12下载到桌面。 4.然后根据里面的Bundle ID新建一个描述文件,也下载到桌面,最后上传到原生打包列表,提交打包。 5.菜单项点击‘发行->云打包-打原生安装包’,出现如下图所示弹框,取消广告勾选项,点击打包,点击‘没有缺少,继续打包’,等待打包完成。(仅以iOS为例) 6.打包完成后如图一所示点击弹窗‘确定’按钮查看打包状态信息,图二显示打包列表信息,点击右侧手动下载,展示如下图三所示,保存安装包到目标文件,发送到手机端安装即可运行。","url":"https://cloud.tencent.com/developer/article/2266569","text":"用HBuilder打包简单项目(vue项目)APP的步骤","source":{"logo":"http://t9.baidu.com/it/u=3705973817,3108460458&fm=217&app=126&f=JPEG?w=553&h=310&s=49D2E31A1F285409106520D2030050B2","name":"腾讯云"},"icon":"http://t9.baidu.com/it/u=3705973817,3108460458&fm=217&app=126&f=JPEG?w=553&h=310&s=49D2E31A1F285409106520D2030050B2","poster":"http://t9.baidu.com/it/u=3705973817,3108460458&fm=217&app=126&f=JPEG?w=553&h=310&s=49D2E31A1F285409106520D2030050B2","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"用HBuilder打包简单项目(vue项目)APP的步骤","thumbnail":"http://t9.baidu.com/it/u=3705973817,3108460458&fm=217&app=126&f=JPEG?w=553&h=310&s=49D2E31A1F285409106520D2030050B2","linkInfo":{"href":"https://cloud.tencent.com/developer/article/2266569"}},{"abstract":" 一、把写好的vue项目进行打包生成dist 二、打开HBuilderX新建项目选择5+APP(A) 把dist的文件夹复制到HBuilderX创建的5+App中 配置图片 配置启动页面 SDK配置 模块权限配置 配置沉寂模式 沉浸式是APP界面图片延伸到状态栏应用本身沉浸于状态栏,所以如果第三方的软件没有为状态栏分配图片,那么自然就是黑色。顶端的状态栏和下面的虚拟按键都隐藏,需要的时候从边缘划出。 沉浸模式。当启用该模式,应用程序的界面将占据整个屏幕,系统自动将隐藏系统的状态栏和导航栏,让应用程序内容可以在最大显示范围呈现,增加大屏体验,而当需要查看通知的时候只需要从顶部向下滑动就能呼出通知栏。 代码: \"statusbar\":{//应用可视区域到系统状态栏下透明显示效果\"immersed\":true}AI写代码javascript 运行 1 2 3 三、开始生成APP 打包完成后在控制台看到一下内容说明已经打包成功 四、生成APP之后bug 生成APP之后进入APP 体验 单击返回 直接退出的本APP应用的解决方法 代码如下: <script type=\"text/javascript\">document.addEventListener('plusready',function(a){//等待plus ready后再调用5+ API://// 在这里调用5+ APIvarfirst=null;plus.key.addEventListener('backbutton',function(){//监听返回键//首次按键,提示‘再按一次退出应用’if(!first){first=newDate().getTime();//获取第一次点击的时间戳// console.log('再按一次退出应用');//用自定义toast提示最好// toast('双击返回键退出应用'); //调用自己写的吐丝提示 函数plus.nativeUI.toast(\"双击退出\",{duration:'","url":"https://blog.csdn.net/weixin_48193717/article/details/108630046","text":"如何用HBuilderX将Vue项目打包成APP到手机使用","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t7.baidu.com/it/u=747828367,2256829534&fm=217&app=126&f=JPEG?w=439&h=440&s=E888BC1AD9AED4CE5A49A1DA0300C0B3","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"如何用HBuilderX将Vue项目打包成APP到手机使用","thumbnail":"http://t7.baidu.com/it/u=747828367,2256829534&fm=217&app=126&f=JPEG?w=439&h=440&s=E888BC1AD9AED4CE5A49A1DA0300C0B3","linkInfo":{"href":"https://blog.csdn.net/weixin_48193717/article/details/108630046"}},{"abstract":" 一、大致流程描述 项目整体使用 Vue+HbuilderX(或者Hbuilder) 开发 使用Vue 来实现基本页面跳转,增删改查等 app 基本功能当需要使用到 app 原生功能则使用一些相关的 UI 框架(如:mui、nutui 等) 真机调试 最后通过HbuilderX将vue项目打包成app包 二、对 vue 项目进行打包 2.1 打包前,将 vue.config. 文件中 base 路径修改为 ./,如图: import { fileURLToPathURL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vite/plugin-vue'import vueJsx from '@vite/plugin-vue-x'export default defineConfig({base:'./'// 如果直接默认打包,打包后静态资源默认为 “/” ,这样会导致找不到静态资源,最后的apk安装以后白屏plugins: [vue(),vueJsx(),],resolve: {alias: {'@': fileURLToPath(new URL('./src'import.meta.url))}}}) 如果直接默认打包,打包后静态资源默认为 “/” ,这样会导致找不到静态资源,最后的apk安装以后白屏 2.2. 将 Vue 项目打包,执行如下命令: npm run build 打包后的 dist 目录如图 打包以后的index.html文件根目录为 ”./“,其他assets文件夹中的文件中的静态资源","url":"https://developer.aliyun.com/article/1262726","text":"Vue 项目利用 HBuilderX 打包 APP 流程","source":{"logo":"http://t9.baidu.com/it/u=2839081615,4209436606&fm=217&app=126&f=JPEG?w=799&h=311&s=EDC2A3421BA1937A4ED4150B0000E0C2","name":"阿里云开发者社区"},"icon":"http://t9.baidu.com/it/u=2839081615,4209436606&fm=217&app=126&f=JPEG?w=799&h=311&s=EDC2A3421BA1937A4ED4150B0000E0C2","poster":"http://t9.baidu.com/it/u=2839081615,4209436606&fm=217&app=126&f=JPEG?w=799&h=311&s=EDC2A3421BA1937A4ED4150B0000E0C2","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"Vue 项目利用 HBuilderX 打包 APP 流程","thumbnail":"http://t9.baidu.com/it/u=2839081615,4209436606&fm=217&app=126&f=JPEG?w=799&h=311&s=EDC2A3421BA1937A4ED4150B0000E0C2","linkInfo":{"href":"https://developer.aliyun.com/article/1262726"}},{"abstract":" 在工具栏选择发行-云打包 如果是第一次进行打包,可能需要登录Dcloud的账号,给你的应用生成一个appid 然后进入打包页面,这里的广告可以自行选择去掉,直接使用快速打包即可,由于是测试用不是正式上架,这里选择使用公共测试证书即可,如果需要上架等可以使用自有证书,直接去按照步骤生成一个即可。 在云打包排队进行打包,打包后会提供apk的生成地址,可以直接发送到安卓机进行调试,也可以用模拟器来进行调试。 模拟器 直接将打包好的apk拖动到模拟器中,模拟器会自动进行安装 最后 到这一步vue项目打包成apk就已经是成功了,这个apk包可以到安卓机中安装和模拟器中安装,由于","url":"https://juejin.cn/post/7342067642882097186","text":"保姆式教学-Vue项目打包成apk ","source":{"logo":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3995954774,1214072087&fm=195&app=88&f=JPEG?w=200&h=200","name":"掘金开发者社区"},"icon":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3995954774,1214072087&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t7.baidu.com/it/u=1978753255,175353868&fm=217&app=126&f=JPEG?w=800&h=402&s=87DBA5761313606B02E90CC20000C0B2","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"保姆式教学-Vue项目打包成apk ","thumbnail":"http://t7.baidu.com/it/u=1978753255,175353868&fm=217&app=126&f=JPEG?w=800&h=402&s=87DBA5761313606B02E90CC20000C0B2","linkInfo":{"href":"https://juejin.cn/post/7342067642882097186"}},{"abstract":" 1. HBuilderX开发工具介绍 HBuilderX是DCloud公司推出的一款轻量级、全面支持Web前端开发的集成开发环境(IDE),它不仅支持uni-app开发,也兼容其他多种前端技术和框架。这款开发工具以其简洁的用户界面、强大的功能集合以及高效的开发体验而备受前端开发者的青睐。HBuilderX的推出,旨在降低开发门槛,提高开发效率,尤其对初学者和中小型团队来说,是一款非常适合的开发工具。 1.1 HBuilderX的界面和功能介绍 HBuilderX的设计界面简洁,功能布局合理,提供了丰富的功能组件,包括代码编辑器、项目管理器、控制台等。它支持代码高亮、智能提示、代码片段、代码美化和重构等多种代码编辑功能,大大提升了编码效率。此外,HBuilderX集成了版本控制系统的支持,如Git,便于开发者进行版本管理和团队协作。 1.2 HBuilderX的扩展性和插件生态 HBuilderX拥有完善的插件系统,开发者可以根据个人或团队的需求安装和开发各类插件,以增强IDE的功能。它的扩展性不仅限于前端开发,还涉及移动应用开发、云端开发等多个领域,通过插件可以快速扩展到各种开发场景,这为开发者提供了极大的便利。 HBuilderX的轻量化设计和丰富功能的组合,使其成为前端开发者的新宠。它不仅解决了开发工具选择多样化的难题,还通过其一站式开发体验,提升了整个开发流程的效率和便捷性。 2. uniapp跨平台框架价值 2.1 uniapp框架的设计初衷和理念 2.1.1 uniapp框架的诞生背景 uni-app 是一个使用 Vue. 开发所有前端应用的框架,能够编译到iOS、Android、以及各种小程序、快应用等","url":"https://blog.csdn.net/weixin_33608403/article/details/148294224","text":"HBuilderX与uniapp的Android应用开发实战指南","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"HBuilderX与uniapp的Android应用开发实战指南","linkInfo":{"href":"https://blog.csdn.net/weixin_33608403/article/details/148294224"}},{"abstract":" Android启动界面设置,使用原生隐私政策提示框,会在项目根目录下创建生成一个文件androidPrivacy.on { \"version\":\"1\"\"prompt\":\"template\"\"title\":\"用户协议和隐私政策\"\"message\":\" 请你务必审慎阅读、充分理解“用户协议”和“隐私政策”各条款,包括但不限于:为了更好的向你提供服务,我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/> 你可阅读<a href=\\\"xxx\\\">《用户协议》</a>和<a href=\\\"xxx\\\">《隐私政策》</a>了解详细信息。如果你同意,请点击下面按钮开始接受我们的服务。\"\"buttonAccept\":\"同意并接受\"\"buttonRefuse\":\"暂不同意\"\"hrefLoader\":\"system\"\"backToExit\":\"false\"\"second\": { \"title\":\"确认提示\"\"message\":\" 进入应用前,你需先同意<a href=\\\"xxx\\\">《用户协议》</a>和<a href=\\\"xxx\\\">《隐私政策》</a>,否则将退出应用。\"\"buttonAccept\":\"同意并继续\"\"buttonRefuse\":\"退出应用\" }\"disagreeMode\": { \"support\":false\"loadNativePlugins\":false\"visitorEntry\":false\"showAlways\":false }\"s\": { \"backgroundColor\":\"#F1F1F1\"\"borderRadius\":\"5px\"\"title\": { \"color\":\"#000\" }\"buttonAccept\": { \"co","url":"https://blog.csdn.net/Qin_jiangshan/article/details/144397728","text":"使用HBuilderX 进行uniapp 打包Android APK","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t9.baidu.com/it/u=3449064745,3697455459&fm=217&app=126&f=JPEG?w=800&h=382&s=9E80D74B5BE8A7684C59340F0000F0C2","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"使用HBuilderX 进行uniapp 打包Android APK","thumbnail":"http://t9.baidu.com/it/u=3449064745,3697455459&fm=217&app=126&f=JPEG?w=800&h=382&s=9E80D74B5BE8A7684C59340F0000F0C2","linkInfo":{"href":"https://blog.csdn.net/Qin_jiangshan/article/details/144397728"}},{"abstract":" 一、准备工作 在开始使用HBuilderX打包移动端项目之前,您需要确保已经完成了以下准备工作: 安装HBuilderX:请确保您的计算机上已经安装了HBuilderX开发工具。如果您尚未安装,可以从DCloud官网下载安装包并按照提示进行安装。 创建Vue项目:在HBuilderX中创建一个Vue项目,或者将现有的Vue项目导入到HBuilderX中。确保项目能够正常运行并展示在浏览器中。 配置移动端环境:为了在HBuilderX中打包移动端项目,您需要配置相应的移动端环境。这包括安装Android SDK和iOS SDK,并配置好相应的环境变量。 二、操作流程 完成准备工作后,您可以按照以下步骤使用HBuilderX对Vue项目进行打包: 打开HBuilderX并导入Vue项目。 在菜单栏中选择“发行”->“原生App云打包”或“原生App本地打包”。 根据您的需求选择相应的打包平台(Android或iOS),并配置好相应的打包参数,如应用名称、应用图标、启动页等。 点击“打包”按钮,等待打包过程完成。 打包完成后,您可以在指定的输出路径中找到生成的APK或IPA文件。 将生成的APK或IPA文件安装到相应的移动设备上,即可进行测试和使用。 三、常见问题及解决方案 在使用HBuilderX打包移动端项目的过程中,可能会遇到一些常见问题。下面列举了一些常见问题及其解决方案: 打包失败:如果打包过程中出现失败的情况,请检查您的移动端环境配置是否正确,以及打包参数是否设","url":"https://developer.baidu.com/article/details/3301634","text":"移动应用开发新篇章:HBuilderX打包移动端项目详解-百度开发者中心","source":{"logo":"https://gips3.baidu.com/it/u=3236075928,3550158464&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f48_48","name":"百度开发者中心"},"icon":"https://gips3.baidu.com/it/u=3236075928,3550158464&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f48_48","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"移动应用开发新篇章:HBuilderX打包移动端项目详解-百度开发者中心","linkInfo":{"href":"https://developer.baidu.com/article/details/3301634"}},{"abstract":" 一、编译速度优化 1.使用缓存 在webpack3中为了提高构建速度,我们往往会用到 DllPlugin 和 DllReferencePlugin 插件,但是配置复杂,更新文件还需要手动重新生成dll,比较繁琐。还有一种autodll-webpack-plugin插件会好用一些。 在webpack4之后可以使用HardSourceWebpackPlugin插件,它通过在磁盘中设置缓存来提升编译加载速度,第一次正常编译并缓存,第二次有缓存后能减少80%-90%的时间,需要安装插件后使用。 webpack5主要使用内置的cache配置。 1.1 autodll-webpack-plugin插件 autodll-webpack-plugin插件可以将项目中的第三方库(如lodash、moment等)单独打包成一个DLL文件,从而减少主文件的体积,提高编译速度。 运行webpack命令进行构建,生成的DLL文件会存放在dist目录下。通过使用autodll-webpack-plugin插件,可以有效地优化Vue项目,提高编译速度和运行效率。 安装 npm install autodll-webpack-plugin--save-dev AI写代码 引入 constAutoDllPlugin=require('autodll-webpack-plugin'); AI写代码 配置 module.exports={ //...其他配置 plugins: [ //...其他插件 new AutoDllPlugin({ inject:true,//自动注入生成的DLL文件到HTML中 filename:'[name].dll.',//DLL文件名格式 entry: { vendor: ['vue','vue-router','vuex']//需要单独打包的第三方库 } }) ] }; AI写代码 1.2 HardSourceWebpackPlugin插件 HardSourceWebpackPlugin是一个用于优化Webpack构建速度的插件。它可以为模块代码创建内存缓存,这样在每次构建时,只需要处理发生更改的模块,而不是重新处理所有模块。","url":"https://blog.csdn.net/weixin_49250511/article/details/142517483","text":"vue前端项目优化(编译速度、打包体积、性能)","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue前端项目优化(编译速度、打包体积、性能)","linkInfo":{"href":"https://blog.csdn.net/weixin_49250511/article/details/142517483"}},{"abstract":" 1.压缩图片 应尽可能地压缩项目中的图片,或使用svg矢量图、雪碧图、webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的。 2.路由懒加载 可以在路由配置里,使用require引入页面或组件实现路由懒加载,每个页面大约可以减少10—50kb的打包体积,示例如下: importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)letrouter=newRouter({routes:[{path:'/index',name:'index',component:(resolve)=>{require(['./index/index.vue'],resolve)},meta:{title:'首页',keepAlive:true,deepth:1}},{path:'/my',name:'my',component:(resolve)=>{require(['./mine/mine.vue'],resolve)},meta:{title:'个人',keepAlive:true,scrollTop:0}},{path:'/*',redirect:'/index'}]})exportdefaultrouter","url":"https://blog.csdn.net/shalDream/article/details/123035583","text":"vue项目webpack打包优化体积优化,打包体积减少200kb到4Mb","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue项目webpack打包优化体积优化,打包体积减少200kb到4Mb","linkInfo":{"href":"https://blog.csdn.net/shalDream/article/details/123035583"}},{"abstract":" 一、使用按需加载组件和库 按需加载是减少打包体积的一个重要方法。通过按需加载,只有在需要的时候才加载特定的组件和库,而不是在初始加载时加载所有的内容。 方法: 动态导入(Dynamic Import):利用Webpack的动态导入功能,可以在需要时才加载模块。 按需加载UI库:如Element UI,可以通过babel-plugin-component插件来实现按需加载。 分割代码(Code Splitting):使用Webpack的代码分割功能,将应用程序分成多个小的代码块,以便按需加载。 示例: // 动态导入 const MyComponent = () => import('@/components/MyComponent.vue'); 二、优化图片资源 图片通常占据了大量的体积,通过优化图片资源,可以显著减少打包后的体积。 方法: 使用合适的图片格式:根据图片的特性选择合适的格式,如JPEG、PNG、SVG等。 压缩图片:使用工具如ImageOptim、TinyPNG等压缩图片。 懒加载图片:使用Vue的懒加载插件,如vue-lazyload,在需要时才加载图片。 示例: import Vue from 'vue'; import VueLazyload from 'vue-lazyload'; Vue.use(VueLazyload{ preLoad: 1.3error: 'dist/error.png'loading: 'dist/loading.gif'attempt: 1 }); 三、移除不必要的依赖 移除不必要的依赖可以显著减少打包体积。通过检查项目中的依赖,删除那些未使用或不必要的依赖,可以有效地减少打包体积。 方法: 代码审查:定期审查项目中的依赖,删除未使用的依赖。 使用更轻量的替代品:如使用lodash-es代替lodash,使用day代替moment.等。 Tree Shaking:利用Webpack的Tree Sh","url":"https://worktile.com/kb/p/3657809","text":"vue打包体积过大如何优化","source":{"logo":"https://mbs1.bdstatic.com/searchbox/mappconsole/image/20220125/4251863d-a6a4-4fa7-9b31-36ab44e0dd89.jpg","name":"Worktile"},"icon":"https://mbs1.bdstatic.com/searchbox/mappconsole/image/20220125/4251863d-a6a4-4fa7-9b31-36ab44e0dd89.jpg","poster":"http://t9.baidu.com/it/u=2210550591,80515329&fm=217&app=126&f=JPEG?w=800&h=457&s=7402D61C48917CC00C1DE5C5030070A3","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue打包体积过大如何优化","thumbnail":"http://t9.baidu.com/it/u=2210550591,80515329&fm=217&app=126&f=JPEG?w=800&h=457&s=7402D61C48917CC00C1DE5C5030070A3","linkInfo":{"href":"https://worktile.com/kb/p/3657809"}},{"abstract":" 1.下载安装Android Studio 下载地址官方地址:Android Studio 下载文件归档 | Android 开发者 | Android Developers 安装AndroidSDK和Google USB Driver即可,后者主要是为了后期使用USB设置的,如果不需要可以不点。 2.下载uni-app提供的Android离线SDK 下载地址:Android 离线SDK - 正式版 | uni小程序SDK 注意:Android离线SDK的版本一定注意和HBuilder X的版本匹配,版本如果不匹配会报错。 将下载下来的离线SDK进行解压,解压后能够看到HBuilder-Integrate-AS这个文件夹。下面就是围绕这个文件夹展开工作。 下面是解压后的文件夹目录,圈住的就是我们要用到的文件夹。 3.配置AppKey及申请Android平台签名证书 3.1.0版本开始需要申请AppKey,申请步骤参考下面链接 申请| uni小程序SDK Android平台签名证书生成链接: https://ask.dcloud.net.cn/article/35777 4.将解压后的HBuilder-Integrate-AS导入Android Studio 5.修改HBuilder-Integrate-AS里面的配置信息 (1)找到下面目录,删除里面的项目 [email protected]_20230817->HBuilder-Integrate-AS->simpleDemo->src->main->assets->apps (2)在BHuilder X里面生成自己的本地资源包 选择菜单栏上的发行->原生App-本地打包->生成本地App打包资源。 看到下面圈住的部分导出成功,路径为...,这就是我们需要使用并替换到Android Studio文件夹下面的项目。 (3)打开资源包生成的地方,","url":"https://blog.csdn.net/lf21qp/article/details/133277438","text":"uni-app使用HBuilder X编辑器本地打包apk步骤说明","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t7.baidu.com/it/u=3332575191,266777402&fm=217&app=126&f=JPEG?w=800&h=371&s=25B07C329388454956E1D1DC030050B3","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"uni-app使用HBuilder X编辑器本地打包apk步骤说明","thumbnail":"http://t7.baidu.com/it/u=3332575191,266777402&fm=217&app=126&f=JPEG?w=800&h=371&s=25B07C329388454956E1D1DC030050B3","linkInfo":{"href":"https://blog.csdn.net/lf21qp/article/details/133277438"}},{"abstract":" 1,先看看是不是正确的apk文件 通常打包后,会出现两个apk文件。 unpackage\\cache\\apk路径下的apk文件 和 \\unpackage\\release\\apk路径下的apk 我们选择安装的apk文件是release路径下的apk文件。 很多同学都是错误的选择了apk文件,才导致报错的。 2,如果你不是apk文件选择错误,那就用记事本将manifest.on文件打开,把里面的注释内容都给删除,只留下源代码。然后重新进行发布打包。 3,如果不会打包的,可以看看我往期的文章,有关于使用HBuilderX发布打包的内容。","url":"http://zhuanlan.zhihu.com/p/690744489","text":"使用HBuilder X 云打包apk文件 安装在手机上显示错误的解决办法","source":{"logo":"http://gips0.baidu.com/it/u=3926354699,790476764&fm=3033&app=3033&f=JPEG?w=200&h=200","name":"苟富贵"},"icon":"http://gips0.baidu.com/it/u=3926354699,790476764&fm=3033&app=3033&f=JPEG?w=200&h=200","poster":"http://t9.baidu.com/it/u=548084889,2421887605&fm=3031&app=3031&f=JPEG?w=800&h=222&s=C010ED3A89F04C030855FCDE020080B4","author_url":"","author_unify_sign":0,"author_name":"苟富贵","author_img":"http://gips0.baidu.com/it/u=3926354699,790476764&fm=3033&app=3033&f=JPEG?w=200&h=200","type":"","vid":"","level":0,"suffix":"","title":"使用HBuilder X 云打包apk文件 安装在手机上显示错误的解决办法","thumbnail":"http://t9.baidu.com/it/u=548084889,2421887605&fm=3031&app=3031&f=JPEG?w=800&h=222&s=C010ED3A89F04C030855FCDE020080B4","linkInfo":{"href":"http://zhuanlan.zhihu.com/p/690744489"}},{"abstract":" 1.1 手机打开开发者模式 安卓手机需要设置开发者模式(正常是关于手机,软件版本点击多次即可打开开发者模式),进入开发者人员选项,打开usb调试和连接USB是总是弹出提示(打开是需要选择传输文件)。 1.2 HBuilder打开项目运行 项目使用HBuilder打开,运行 -> 运行到手机或者模拟器 -> 运行到Android App基座. 第一次HB需要下载插件,下载完成后可以正常用。 点击运行到Android App基座,显示没有设备 usb连接后,选择传输文件,即可检测到手机设备,点击运行 开始编译,需要等待一段时间 此时手机会传输基座到手机,安装apk软件. 还有一种方式,也可以直接安装hbuilder安装目录HBuilderX\\plugins\\launcher\\baseandroid_base.apk,这样可以省去安装时间,会跳过更新 完成后,打开手机,会出现Hbuilder基座软件 此时打开软件,点击到对应页面,可以看到打印日志的位置 2. 打包 温馨提示HB版本有限制,建议3.99的版本,高版本打包都会白屏。 2.1 app配置 需要在manifest.on中配置android和ios必须的权限等配置。 基本信息:应用名称、描述、版本名称、版本号 图标配置:上传你的应用图标,建议1024*1024,然后自动生成所有图标并替换 启动界面:使用原生隐私政策提示框,这个很重要,勾选后会自动生成配置文件androidPrivacy.on,根据自己进行填写 模块配置:根据自己的需要进行打勾选择。比如我用到的是扫码,分享就勾选就好了;如果遇到支付,登录或分享,还需要到对应平台申请应用 ID 和通用链接 权限配置:根据自己应用的情况来勾选对应的权限,用到什么就勾选什么,不用勾选多余的,以免上架审核被打回来 常用其他设置:主要是支持CPU 类型,HBuilderX 已经支持以下 CPU 架构: armeabi-v7a:第 7 代及以上的 ARM 处理器(ARM32 位),市面上大多数手机使用此 CPU 类型。","url":"https://juejin.cn/post/7402797060981063714","text":"uniapp调试、打包、发布app全过程 ","source":{"logo":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3995954774,1214072087&fm=195&app=88&f=JPEG?w=200&h=200","name":"掘金开发者社区"},"icon":"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3995954774,1214072087&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t8.baidu.com/it/u=2684355560,3794476546&fm=217&app=126&f=JPEG?w=558&h=598&s=8C0A5C32511E45CE9C7DB0C8010070B0","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"uniapp调试、打包、发布app全过程 ","thumbnail":"http://t8.baidu.com/it/u=2684355560,3794476546&fm=217&app=126&f=JPEG?w=558&h=598&s=8C0A5C32511E45CE9C7DB0C8010070B0","linkInfo":{"href":"https://juejin.cn/post/7402797060981063714"}},{"abstract":" 方法一:使用npm(推荐) $npmi vconsole 1 我安装的版本号 \"vconsole\":\"^3.15.0\" 1 可参考下方的截图红框部分。 import 并初始化后,即可使用console.log功能,如Chromedevtools 上一样 importVConsolefrom'vconsole';constvConsole=newVConsole();// 或者使用配置参数来初始化,详情见文档constvConsole=newVConsole({theme:'dark'});// 接下来即可照常使用 `console` 等方法console.log('Hello world');// 结束调试后,可移除掉vConsole.destroy(); 1 2 3 4 5 6 7 8 9 10 11 方法二:使用 CDN 直接插入到 HTML 然后在vue项目中 在index.htmlscript脚本中加入如下代码 <script src=\"https://unpkg.com/vconsole@latest/dist/vconsole.min.\"></sc","url":"https://blog.csdn.net/m0_37680500/article/details/130625320","text":"vue移动端真机调试方法","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t9.baidu.com/it/u=846473999,1623528531&fm=217&app=126&f=JPEG?w=800&h=400&s=D8ABE35ACC80AC43401E4649020040D5","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue移动端真机调试方法","thumbnail":"http://t9.baidu.com/it/u=846473999,1623528531&fm=217&app=126&f=JPEG?w=800&h=400&s=D8ABE35ACC80AC43401E4649020040D5","linkInfo":{"href":"https://blog.csdn.net/m0_37680500/article/details/130625320"}},{"abstract":" 1.第一步、在那个根目录下找到package.on的文件夹 \"scripts\": { \"dev\":\"vue-cli-service serve --host 着里填你的电脑的地址就可以\"\"build\":\" cross-env BUILD_TYPE=web_app vue-cli-service build\"\"lint\":\"vue-cli-service lint\"\"test:unit\":\"vue-cli-service test:unit\"\"docs:dev\":\"vuepress dev docs\"\"docs:build\":\"vuepress build docs\" }AI写代码javascript 运行 在这个dev后面加 --host 电脑的地址就可以 如果不知道是多少的话,可以打开终端输入ipconfig 然后找到你对应的地址复制下来即可 2.第二步、使用笔记本的热点,可以下载一个360免费WIFI然后打开连接这个热点就可以 3.第三步、就是手机上这时候就可以访问你电脑的这个地址了,把项目跑起来后,直接复制地址端口就可以访问了,就可以边改边测了。 也可以使用一个网站比如草根二维码,你把地址端口输入后生成二维码,然后就可以微信直接码就可以访问了。","url":"https://blog.csdn.net/baoluoo/article/details/140872563","text":"关于开发手机app的真机测试怎么弄","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"关于开发手机app的真机测试怎么弄","linkInfo":{"href":"https://blog.csdn.net/baoluoo/article/details/140872563"}},{"abstract":" 一、确保项目在局域网内可访问 首先,要确保你的开发电脑和移动设备在同一个局域网内。这样,移动设备才能通过IP地址访问电脑上的开发服务器。你可以通过以下步骤来检查和配置: 连接同一个Wi-Fi网络:确保开发电脑和移动设备都连接到了同一个Wi-Fi网络。 获取电脑的局域网IP地址:在开发电脑上,通过命令行工具(如Windows的cmd或Mac的Terminal)输入ipconfig(Windows)或ifconfig(Mac/Linux),找到当前网络连接的IPv4地址。 二、配置开发服务器 接下来,需要配置Vue项目的开发服务器,使其可以通过局域网IP地址访问。通常,Vue CLI提供的开发服务器默认只在localhost上运行,需要做以下修改: 修改vue.config.文件:在项目根目录下找到或创建vue.config.文件,添加如下配置: module.exports = { devServer: { host: '0.0.0.0'port: 8080// 可以自定义端口 // 其他配置项 }}; 允许防火墙访问:确保电脑的防火墙允许外部设备访问配置的端口(如8080)。具体步骤因操作系统而异,可以参考相应的防火墙配置指南。 三、连接移动设备 在确保项目可以通过局域网IP地址访问后,接下来需要在移动设备上进行访问和调试: 打开浏览器:在移动设备上打开浏览器(如Chrome、Safari等)。 输入IP地址和端口:在浏览器地址栏中输入开发电脑的局域网IP地址和配置的端口号,例如http://192.168.1.5:8080,然后访问。 四、启动项目并测试 在移动设备上访问项目后,可以进行实际的测试和调试: 启动开发服务器:在开发电脑的项目根目录下,通过命令行工具运行npm run serve或yarn serve命令,启动Vue项目的开发服务器。 实时查看变化:在移动设备的浏览器中查看项目的实际效果,并进行交互测试,确保各项","url":"https://worktile.com/kb/p/3654044","text":"vue项目如何真机调试","source":{"logo":"https://mbs1.bdstatic.com/searchbox/mappconsole/image/20220125/4251863d-a6a4-4fa7-9b31-36ab44e0dd89.jpg","name":"Worktile"},"icon":"https://mbs1.bdstatic.com/searchbox/mappconsole/image/20220125/4251863d-a6a4-4fa7-9b31-36ab44e0dd89.jpg","poster":"http://t8.baidu.com/it/u=1586067400,2630110924&fm=217&app=137&f=JPEG?w=800&h=457&s=A03774948896C1EB46A2E4D8030050BB","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue项目如何真机调试","thumbnail":"http://t8.baidu.com/it/u=1586067400,2630110924&fm=217&app=137&f=JPEG?w=800&h=457&s=A03774948896C1EB46A2E4D8030050BB","linkInfo":{"href":"https://worktile.com/kb/p/3654044"}},{"abstract":" 编写Android 原生代码 下载openinstall SDK 并将 jar 包拷贝到项目的 libs 目录。创建一个package,如 com.wenkiwu.hbuilder.openinstall;在包中新建一个类继承自 StandardFeature,然后对应openinstall的接口定义相应的功能方法。完整代码如下: package com.wenkiwu.hbuilder.openinstall; import android.content.Context; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.text.TextUtils; import android.util.Log; import com.fm.openinstall.OpenInstall; import com.fm.openinstall.listener.AppInstallAdapter; import com.fm.openinstall.listener.AppWakeUpAdapter; import com.fm.openinstall.model.AppData; import org.on.JSONArray; import org.on.JSONException; import org.on.JSONObject; import io.dcloud.common.DHInterface.ISysEventListener;","url":"https://blog.csdn.net/weixin_30313409/article/details/112823681","text":"hbuilderx原生开发方法_HBuilder第三方插件开发(Android平台openinstall集成)","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"hbuilderx原生开发方法_HBuilder第三方插件开发(Android平台openinstall集成)","linkInfo":{"href":"https://blog.csdn.net/weixin_30313409/article/details/112823681"}},{"abstract":" 选择该插件绑定的项目。 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。 开发完毕后正式云打包","url":"https://blog.csdn.net/weixin_57998789/article/details/148261748","text":"直播-uni-app-快速集成","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"直播-uni-app-快速集成","linkInfo":{"href":"https://blog.csdn.net/weixin_57998789/article/details/148261748"}},{"abstract":" 代码仓库:Gitee、GitHub uni-app的uni-im交流群:点击加入 官方QQ交流群 群35:713420817(2000人已满) 群34:530305531(2000人已满) 群33:498071674(2000人已满) 群32:166188631(2000人已满) 群31:567471669(2000人已满) 群30:371046920(2000人已满) 群29:202965481(2000人已满) 群28:166188776(2000人已满) 群27:811363410(2000人已满) 群26:147867597(2000人已满) 群25:165297000(2000人已满) 群24:672494800(2000人已满) 群23:599958679(2000人已满) 群22:687186952(2000人已满) 群21:717019120(2000人已满) 群20:165796402(2000人已满) 群19:165657124(2000人已满) 群18:698592271(2000人已满) 群17:951348804(2000人已满) 群16:719211033(2000人已满) 群15:516984120(2000人已满) 群14:465953250(2000人已满) 群13:699478442(2000人已满) 群12:884860657(2000人已满) 群11:296811328(2000人已满) 群10:959059626(2000人已满) 群9:775128777(2000人已满) 群8:695442854(2000人已满) 群7:942061423(2000人已满) 群6:697264024(2000人已满) 群5:731951419(2000人已满) 群4:942702595(2000人已满) 群3:773794803(2000人已满) 群2:901474938(2000人已满) 群1:531031261(2000人已满) 关注微信公众号 uni-app在App侧的原生扩展插件,支持使用java、obj","url":"https://zh.uniapp.dcloud.io/plugin/native-plugin.html","text":"uni-app官网","source":{"logo":"http://t9.baidu.com/it/u=2780909086,3809337111&fm=217&app=126&f=JPEG?w=800&h=248&s=B8A07D3265D8DD205259B0DA030010B2","name":"zh.uniapp.dcloud.io"},"icon":"http://t9.baidu.com/it/u=2780909086,3809337111&fm=217&app=126&f=JPEG?w=800&h=248&s=B8A07D3265D8DD205259B0DA030010B2","poster":"http://t9.baidu.com/it/u=2780909086,3809337111&fm=217&app=126&f=JPEG?w=800&h=248&s=B8A07D3265D8DD205259B0DA030010B2","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"uni-app官网","thumbnail":"http://t9.baidu.com/it/u=2780909086,3809337111&fm=217&app=126&f=JPEG?w=800&h=248&s=B8A07D3265D8DD205259B0DA030010B2","linkInfo":{"href":"https://zh.uniapp.dcloud.io/plugin/native-plugin.html"}},{"abstract":" 一、vue项目编译为H5项目 在vue项目根目录下的package.on文件中添加打包命令 \"scripts\": { \"build\":\"vue-cli-service build\" } AI写代码 打包的项目输出位置,可以直接在项目根目录下的vue.config. 文件中进行设置 const webpack=require('webpack'); module.exports={ publicPath: process.env.NODE_ENV==='production'?'./':'./'outputDir:'dist'lintOnSave:truefilenameHashing:falseruntimeCompiler:true,//关键点在这 //调整内部的 webpack 配置。 //查阅https://github.com/vue/vue-doc-zh-cn/vue-cli/webpack.md //chainWebpack: ()=>{}//chainWebpack: (config)=>{ //config.entry('main').add('babel-polyfill') //}configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $:\"jquery\"jQuery:\"jquery\"\"windows.jQuery\":\"jquery\" }) ] }//configureWebpack: ()=>{}//配置webpack-dev-server 行为。 devServer: { open: process.platform==='darwin'host:'0.0.0.0'port:8080https:false,","url":"https://blog.csdn.net/ahualong1/article/details/142216306","text":"vue项目如何打包Android APK(保姆教程)","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t9.baidu.com/it/u=2283654975,2072037713&fm=217&app=126&f=JPEG?w=800&h=1036&s=D8B8E35ADAE5936C5EED0516030070C1","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue项目如何打包Android APK(保姆教程)","thumbnail":"http://t9.baidu.com/it/u=2283654975,2072037713&fm=217&app=126&f=JPEG?w=800&h=1036&s=D8B8E35ADAE5936C5EED0516030070C1","linkInfo":{"href":"https://blog.csdn.net/ahualong1/article/details/142216306"}},{"abstract":" 1.下载HBuilder X 2.准备好自己的vue项目 这里使用的是二维码扫码功能的页面,只有ScanCoder.vue是自己写的扫码页面 3.把vue项目打包 npm run build 得到dist文件夹 没有static文件夹也不要急,下面配置会解释原因注意这里尝试打开index.html看看你的页面是否能正常显示:这里一般是资源路径问题,相信各位吴彦祖都能快速解决呢,如果不能请按照以下配置修改部分vue项目文件配置文件vue.config.设置 const{ defineConfig } =require(\"@vue/cli-service\"); module.exports=defineConfig({ transpileDependencies:truelintOnSave:false,// 只需要在原有的语句的基础上加上这一句 publicPath:\"./\"/* 输出文件目录:在npm run build时,生成文件的目录名称 */ outputDir:\"./dist\"/* 放置生成的静态资源 (、css、img、fonts) 的 (相对于 outputDir 的) 目录 */ assetsDir:\"static\"/* 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度 */ productionSourceMap:false/* 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */ devServer: { /* 自动打开浏览器 */ open:true// proxy: { // '/api': { // target: 'http://localhost:3000'// 这里是你本地服务器的地址 // changeOrigin: true// pathRewrite: { // '^/api': ''// }// }// } ","url":"https://blog.csdn.net/weixin_51877314/article/details/143207256","text":"把vue项目打包成安卓安装包apk","source":{"logo":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","name":"CSDN博客"},"icon":"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2005731947,4139443793&fm=195&app=88&f=JPEG?w=200&h=200","poster":"http://t7.baidu.com/it/u=1726922632,2420271287&fm=217&app=126&f=JPEG?w=800&h=389&s=30895D32BDEBB80D3C18F084030020E9","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"把vue项目打包成安卓安装包apk","thumbnail":"http://t7.baidu.com/it/u=1726922632,2420271287&fm=217&app=126&f=JPEG?w=800&h=389&s=30895D32BDEBB80D3C18F084030020E9","linkInfo":{"href":"https://blog.csdn.net/weixin_51877314/article/details/143207256"}},{"abstract":" 一、使用CORDOVA或CAPACITOR将VUE项目转换成移动应用项目 安装Cordova或Capacitor: Cordova: npm install -g cordova Capacitor: npm install @capacitor/core @capacitor/cli 创建Cordova或Capacitor项目: Cordova: cordova create myApp cd myApp cordova platform add android Capacitor: npx cap init [app-name] [app-id] npx cap add android 将Vue项目打包成静态文件: npm run build 将打包后的文件复制到Cordova或Capacitor项目的www目录: Cordova: cp -R dist/* platforms/android/app/src/main/assets/www/ Capacitor: npx cap copy android 二、配置项目以适应移动设备 配置index.html文件: 确保在Vue项目的index.html中包含以下元标签,以使其适应移动设备: <meta name=\"viewport\" content=\"width=device-widthinitial-scale=1maximum-scale=1user-scalable=no\"> 配置移动平台特定的设置: Cordova: 编辑config.xml文件,根据需要设置应用名称、包名等信息。 Capacitor: 编辑capacitor.config.on文件,根据需要设置应用名称、包名等信息。 安装必要的插件: Cordova: cordova plugin add cordova-plugin-whitelist 并在config.xml中添加: <allow-navi","url":"https://worktile.com/kb/p/3653991","text":"vue项目如何打包成apk","source":{"logo":"https://mbs1.bdstatic.com/searchbox/mappconsole/image/20220125/4251863d-a6a4-4fa7-9b31-36ab44e0dd89.jpg","name":"Worktile"},"icon":"https://mbs1.bdstatic.com/searchbox/mappconsole/image/20220125/4251863d-a6a4-4fa7-9b31-36ab44e0dd89.jpg","poster":"http://t9.baidu.com/it/u=2354459607,3300199257&fm=217&app=126&f=JPEG?w=800&h=457&s=C8F115D69F0360CA0C59C6540300C0F6","author_url":"","author_unify_sign":0,"author_name":"","author_img":"","type":"","vid":"","level":0,"suffix":"","title":"vue项目如何打包成apk","thumbnail":"http://t9.baidu.com/it/u=2354459607,3300199257&fm=217&app=126&f=JPEG?w=800&h=457&s=C8F115D69F0360CA0C59C6540300C0F6","linkInfo":{"href":"https://worktile.com/kb/p/3653991"}}]