vue项目用hbuilderX打包成app运行过程（包括解决真机调试检测不到苹果手机）

最新推荐文章于 2024-07-22 16:52:47 发布
最新推荐文章于 2024-07-22 16:52:47 发布
阅读量2.7k 收藏 2
点赞数
文章标签： hbuilderx 真机调试 苹果手机 app vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40679578/article/details/103013443
版权

如果用hbuilder的话，右键就可以把项目转成app了，hbuilderX更麻烦一些，需要npm run build 打包之后，在hbuilderX新建一个app项目
在这里插入图片描述
项目结构是这样的
在这里插入图片描述
这里我踩了个坑，按照其他人的做法，把dist文件下的static里面的js、css啥的复制进去之后，运行报错，路径不对
正确做法应该是把项目里的css img js index全删掉，然后直接把dist下static和index复制进来，运行就ok了。

运行没问题之后发现手机连不上
我是windows系统，不知道其他系统咋弄
1、下itunes，然后手机上跳出来是否对着个电脑信任，点信任之后，看连没连上手机，下图就代表连上了
在这里插入图片描述
连上之后还是检测不到手机，试了网上各种方法最后发现要安装驱动

2、在电脑上下一个iTools，然后按照他的提示一顿操作，有更新卸载什么的，最后告诉我失败了…

但是重新打开hbuilderX，发现能检测到了…

然后运行到手机上，手机上有一个app，点开说

最低0.47元/天 解锁文章
羊心眼
关注
Vue 项目利用 HBuilderX 打包 APP 流程
前端知识分享喵
05-12 6784
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。
vue项目通过HBuilder打包发布
iiLeon的博客
03-10 2870
vue项目，打包，发布，Hbuilder
前后端分离，跨域导入并运行项目（在idea和HBuilderX）
ztw9258
08-07 7267
文章目录标题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XkRZ0N3l-1628303980824)(https://uploadfiles.nowcoder.com/images/20210807/915320854_1628302740118/4A47A0DB6E60853DEDFCFDF08A5CA249 “图片标题”)] 标题 ...
Vue利用HBuilder打包APP以后，访问不到数据
weixin_45897915的博客
02-28 2136
这个没有想象的那么复杂 import axios from ‘axios’ axios.defaults.baseURL=’/apis’ //开发是使用代理，避免跨域问题 axios.defaults.baseURL=‘http://xxx.xxx.xx.xx/api/v3/basic/advert/lists’ //HBuilder打包时，使用域名(不然请求不到数据) ...
随手记：HBuilder X真机调试找不到iOS设备
最新发布
weixin_63515766的博客
07-22 217
HBuilder X真机调试找不到iOS设备
HbuliderX项目运行至微信开发者工具详细教程
我是段段的博客
03-30 7622
首先需要安装两个工具： 点击下载：HbuilderX 根据操作系统选择对应的版本，然后选择软件版本，推荐使用App开发版，里面安装好了很多插件 点击下载：微信开发者工具 推荐使用稳定版 安装好之后打开HbuilderX编辑器，点击文件 -> 新建 -> 项目后出现如下页面，填写项目名称，选择项目保存路径，然后点击创建即可 然后在HbuilderX顶部导航栏找到工具 -> 设置后点击 点击左侧运行配置，下滑找到微信开发者工具路径，点击浏览找到自己微信开发者工具安装路径即可 然后打开
HBuilderX的下载安装和创建/运行项目
彬sir哥的博客
08-03 966
HBuilderX的下载安装的步骤：第一步：HBuilderX：第二步，按下图操作按下图操作：按下图操作：正在解压。
HbuilderX导入uniapp项目并运行
qq_50880219的博客
08-21 2273
一般只会在第三步出现问题，npm install出现error或者其他奇怪冗长的报错，大概率是项目package.json下的node-sass版本和自己电脑安装的nodejs或npm不匹配。（1）nvm use 安装的nodejs版本号。3.1查阅node-sass匹配的nodejs版本。
使用hbuilderx将vue项目打包成App
啊哈前端的专栏
06-02 6965
一、打包vue web项目 1、修改build的配置 在vue-cli(2.9.x版本)下，修改config目录下index.js里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号) 2、运行yarn run build（我用的是yarn包管理器，如果是用npm，则运行npm run build） 打包后的静态资源文件之后会用到。 ...
app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App
weixin_31730595的博客
02-22 377
在开发移动端 app 时可以选择原生 app 和 webapp， 原生 app 体验好，开发成本高，相对的 webapp 体验要差，开发成本低。webapp 要求很低，可以说只要会开发web 站就能开发 webapp，这里不讨论怎么选择，我们讨论怎么将已经开发好的 web 站打包成 webapp。我们以一个热门的 Vue 技术栈的项目举例。技术栈webpackvuevue-routervuex工具...
vue项目中监听手机物理返回键的实现
11-21
背景：项目中有一个场景要监听android手机物理返回键，但是app和js的中间件又没提供这个事件的监听，只能百度纯js实现了 第一步： xback.js ;!function(pkg, undefined){ var STATE = 'x-back'; var element; var onPopState = function(event){ event.state === STATE && fire(); } var record = function(state){ history.pushState(state, null, location.href); }
详细图文介绍使用HBuilder开发uni-app前端APP如何在安卓真机里浏览实际项目？
十月在秋天的博客
02-23 384
接触过uni-app开发者对于使用HBuilder开发的多种好处，已无需再说， 它的一套代码，多端使用确实非常爽，特别是移动端。详细图文介绍使用HBuilder开发uni-app前端APP如何在安卓真机里浏览实际项目？
了解uni-app只需这一篇就足够了
m0_67402341的博客
03-09 1110
什么是uni-app 介绍 uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台 uni-app在手，做啥都不愁，即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯 只要你有Vue和小程序的开发经验，即可快速上手
HBuilder把vue项目打包app后请求不到数据问题
panfuyong11的专栏
09-05 6582
最近用VUE写了一个webapp项目，用HBulider打包成app用手机打开后，数据居然请求不到，引入的阿里的iconfont字体图标也加载不进来。交互是用axios写的，使用了跨域代理。 解决方法有两种： 1、加上固定域名(https://www.uplanok.com) 由于打包的app只是套上了一个壳子，所以打开app后找不到对应的域名，所以请求不到的数据。 例如一个注册接口：...
[HBuilder][真机调试]HBuilder X 无法识别iPhone 12
Kcite的博客
12-19 1188
HBulider X 真机调试 iPhone 12 问题 今天用新台式机来构建开发环境。用途是用uni.app开发跨平台应用。 在真机调试中，HBulider X一直无法识别到iPhone 12。百度了一些解决方案。 最后，卸载最新版的iTunes，在这里选择下载 iTunes 64位 12.9.1.4进行下载安装。 打开iTunes内提示要升级才可以识别设备，没有检查更新，先去打开HBulider X。 打开HBulider X发现了iPhone 12 设备。 到这里，真机调试问题解决。 ...
Hbuildx工具启动uniapp项目
weixin_48952990的博客
07-17 2225
Hbuild工具启动uniapp项目
HbuilderX中 真机调试 Android IOS
Gblfy_Blog
05-28 690
文章目录一、Android二、IOS2.1. 运行到IOS2.2. 打开调试模式 一、Android HbuilderX中 Android 真机调试 二、IOS 2.1. 运行到IOS 2.2. 打开调试模式
解决使用Hbuilderx打包Vue项目为安卓APP点击物理返回键直接退出应用问题
祈盼的博客
04-06 1342
已解决：使用Hbuilderx打包Vue项目为安卓APP点击物理返回键直接退出应用问题描述解决思路开始操作 问题描述 使用vue框架写的项目，打包之后用Hbuilderx打包成了apk文件，在安卓手机上测试时发现点击安卓的物理返回按钮时会直接杀死应用。 解决思路 如果没有上一个路由地址则直接退出应用，如果有则返回到上一个路由地址的页面。 开始操作 找到文件的index.js文件，在<title></title>代码下面添加一段代码 <script> document
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值