安卓手机模拟器调试--vue项目在线调试（HBuilder X, 配合模拟器--夜神模拟器）及打包

最新推荐文章于 2025-04-29 10:21:09 发布
最新推荐文章于 2025-04-29 10:21:09 发布
阅读量4.6k 收藏 12
点赞数 3
分类专栏： 移动端调试 文章标签： 移动端调试（安卓）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangshab/article/details/103314641
版权
本文介绍了如何使用HBuilder X在安卓模拟器（夜神模拟器）和真机上调试Vue项目，包括修改Vue配置、打包Vue项目并替换到Hbuilder X项目中，以及设置沉浸状态栏。还提供了模拟器调试的ADB端口号配置和真机调试的开发者选项设置。最后讲解了如何通过Hbuilder X进行应用打包，并分享下载链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.下载HBuilder X

下载地址 -- https://www.dcloud.io/

2.打开HBuilder 建一个项目

 

 

3. 打包自己的Vue项目，vue-cli2 在目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，如果是vue-cli3 则在vue.config.js中配置publicPath,将值变为"./".打包。

最低0.47元/天 解锁文章
Vue + quasar-framework进行Vue混合app开发 ─ 模拟器选择及使用(四)
寻梦无痕
11-10 8268
这里推荐2钟比较常用的模拟器，Genymotion和Android Studio自带的Android Virtual Device，至于喜欢用哪个就用哪个。 Genymotion 需要准备下载的软件 VirtualBox：点击下载 Genymotion：点击下载（下载需要登录，所以先注册个账号，后面使用的时候也需要登录） 安装过程省略，自己搞定 VirtualBox Genymotion 点击...
HBuilderX打包H5、vue项目
bestyinjun的专栏
12-19 2116
HBuilderX打包H5、vue项目
vue手机端的调试神器
yuhan___的博客
12-02 584
window.eruda.init()
安卓手机、安卓模拟器中调用H5页面功能时的调试办法
最新发布
zhin001的博客
04-29 523
本文记录工作中使用Chrome DevTools连接安卓手机或安卓模拟器，对其中的页面调用进行类似F12的调试流程。涉及到adb的使用。
vueterminalemulator采用Vue模拟器一个终端
08-08
vue-terminal-emulator：采用Vue模拟器一个终端
vue真机模拟神器移动端控制台vConsole
Genius_cxx
10-08 906
首先下载模块 cnpm i vconsole -s; 然后在main.js中引入模块 import VConsole from 'vconsole' const vConsole = new VConsole() console.log(vConsole.version) 完工，加油小伙伴们。
uniapp+vite+vue3开发跨平台app，运行到安卓模拟器调试方法
11-14 1251
因为没有使用hbuilder开发uniapp，而是使用了vscode和vite来开发的，所以怎么将这个程序运行到安卓模拟器调试开发呢？
夜神APP模拟器，结合hbuilder、uni-app使用
03-12
3. **uni-app的项目创建与配置**：介绍如何在HBuilderX中创建uni-app项目，设置项目属性，以及如何配置目标平台，如Android或iOS。 4. **在Nox模拟器上运行uni-app**：详细说明如何将uni-app项目部署到已安装的Nox ...
App开发-使用Android模拟器进行页面调试及功能测试
不觉晓晓的博客
06-11 3872
我们在App开发的过程中，不像pc端开发，在浏览器调试合适显示结构基本就不会发生大的改变，而App开发则不同，不同手机型号不同分辨率，在浏览器上转换为手机模式进行调试，可能达不到我们预想的效果，但是呢我们也不能稍作修改就打包发布，实用性不高，不适合开发调试阶段，这个时候手机模拟器的实用性就展示出来了。 最近也在做App开发，我们一般是把前台build在发布到模拟器上进行调试和查看样式的效果，不过浏览器的调试也是必不可少的，在模拟器上再次进行调试就是为了确保我们在浏览器上显示的效果在真正的手机端也可以有同样
HBuilderX接夜神Android模拟器调试
m0_47796330的博客
05-15 981
很多小伙伴对于HBuilderX或者HBuilder连接夜神模拟器不是太了解，此篇文章将会进行详细讲解 1，下载HBuilderX并安装 下载地址：https://www.dcloud.io/hbuilderx.html 2，下载夜神并安装 下载地址：https://www.yeshen.com/ 3，正常启动夜神模拟器 4，找到夜神模拟器的文件所在位置 步骤：右击夜神模拟器–打开文件所在位置–点击根目录–输入cmd–点击回车键–输入指令 nox_adb connect 127.0.0.1:62001 no
vue 移动端调试工具
逆风优雅的博客
05-06 644
<script src="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init()</script> 将以上代码直接复制到index.html 文件中 此时在项目中就会出现这样一个图标， 当点击这个图标的时候，就可以查看console,network等信息 ...
vuecommand一个完全工作的Vuejs终端模拟器
08-11
vue-command：一个完全工作的Vue.js终端模拟器
在安卓手机中调试vue网站
武汉小喽啰
09-01 733
我们想在手机上，尝试调试我们编写的程序，操作步骤： 1. 要保证手机正常运行 2. 要保证手机、电脑、处于同一WiFi环境中，也就是说手机可以访问到电脑的IP 3. 打开自己的 项目中的 package.json 文件，在Dev脚本中，添加一个 --host 指令，把当前电脑的主机的WiFi地址，设置为--host的指令值 3.1 在cmd窗口中输入命令ipconfig复制“无线局域网适配...
vue 移动端项目如何在手机上演示
HaushoLin的博客
09-28 1703
打开cmd 输入ipconfig 找到ipv4 对应的IP地址 复制到vue项目中的package.json中的scripts --> serve的值vue-cli-service serve 后面加上 --host和你的ipv4地址，在npm run serve就可以把链接复制在手机上查看了，手机就可以访问本地电脑的项目了 在package.json文件中添加本地ipv4地址 "scripts": { "serve": "vue-cli-service serve --host 192.16
网页的Vue项目怎么在手机上面测试
Kratial的博客
09-13 2332
1.修改config文件夹下面的index.js文件 找到host: ‘localhost’,修改为：host: ‘0.0.0.0’ module.exports = { dev: { ...... host: 'localhost', // can be overwritten by port: 8080, // can 2.运行在命令行输入：npm run dev ...
vue 移动端调试工具（vconsole）
weixin_45786844的博客
07-31 510
如何在echarts里面动态修改数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
手机浏览器查看vue项目
Serena_tz的博客
09-16 2755
在手机浏览器上面我们可以直接查看vue项目。在有网的条件下，我们使用指令npm run serve启动一个项目，会出现两个网址，一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（Network），我们可以在手机端查看我们的vue项目。 【注意】：我们的手机和开启服务的电脑要连入同一个网络。 ...
vue android studio,2.搭配Android studio
weixin_30423863的博客
05-27 612
1. **生成Android**在项目中的命令行输入```weex platform add android```在andriod studio中打开模拟器，然后运行以下命令```weex run android`````````>[danger]执行该步骤的前提是安装Android studio，安装过JDK，配置完环境变量********2. **使用Android studio打开**...
vue.js适配各个终端_完整的Vue.js终端模拟器
cuk5239的博客
07-27 1210
vue.js适配各个终端 Vue命令 (vue-command) A fully working Vue.js terminal emulator. 完全正常工作的Vue.js终端模拟器。 View demo 查看演示 Download Source 下载源 特征 (Features) yargs-parseryargs-parser解析参数 ↑/↑ / ↓)↓ ) White/Dark ...
<ul> <li>用户 <bdi>hrefs</bdi>: 60 分</li> <li>用户 <bdi>jdoe</bdi>: 80 分</li> <li>用户 <bdi>إيان</bdi>: 90 分</li> </ul>中<bdi>解析
02-23
这是一个包含用户分数的列表。每个用户都有一个名称和一个分数。在这个列表中，有三个用户： - 用户 "hrefs" 的分数是 60 分。 - 用户 "jdoe" 的分数是 80 分。 - 用户 "إيان" 的分数是 90 分。 这个列表使用了 HTML 的 `<ul>` 和 `<li>` 标签来表示。`<ul>` 表示一个无序列表，`<li>` 表示列表中的每一项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值