在html5+app里调试vue页面

最新推荐文章于 2025-07-02 14:33:05 发布

原创最新推荐文章于 2025-07-02 14:33:05 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍如何通过修改项目配置和app内网页地址，实现笔记本与手机在同一WIFI下进行跨设备调试，包括查询本地IP地址、调整Vue项目设置及运行app和项目的步骤。

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

开发工具:HBuilderX

1.笔记本和手机连接到同一个WIFI

2.查询本地IP地址

WIN+R，输入cmd回车，输入ipconfig，查看本地IPv4；

3.修改网页项目中IP地址

找到项目中config文件夹，下面index.js文件打开；

找到如下代码

module.exports = {
dev: {
    env: require('./dev.env'),
    port: 8081,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    host: '192.168.0.107',    //默认为localhost,修改为你的IPv4，如果没有这一行则自行添加
    }
}

4.把app内的网页地址改你的IPv4地址

<script>
	function plusReady() {
		plus.nativeUI.showWaiting('加载中..');
		var wc = plus.webview.currentWebview();
		var url="http://192.168.1.44:8081/";    //这是我的本机IPv4
		var embed = plus.webview.create(url, 'refund_wap', {
			top: 'px',
			bottom: '0px'
		});
		plus.nativeUI.closeWaiting();
		wc.append(embed);
		wc.show();
	}
	if (window.plus) {
		plusReady();
	} else {
		document.addEventListener('plusready', plusReady, false);
	}
</script>

5.本地跑起app和vue项目

如果app跑不起来的话先将IPv4地址改为线上项目地址，先将app跑起来，再修改IPv4为你的电脑IPv4