在html5+app里调试vue页面

本文详细介绍如何通过修改项目配置和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

### uni-app TypeScript Vue3 入门教程 #### 1. 环境准备 为了顺利进行uni-app项目的开发,需先安装Node.js环境以及npm包管理工具。确保已正确配置好这些依赖项。 #### 2. 创建新项目 使用`vue-cli`来创建基于Vue3和TypeScript的新uni-app应用。这可以通过全局安装`@vue/cli`并利用其提供的预设模板完成: ```bash npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue#vue3 my-project-name ``` 在提示选择编程语言时,请指定TypeScript作为首选选项[^4]。 #### 3. 配置Vite构建工具 对于现代前端开发而言,采用快速高效的打包方案至关重要。推荐引入[Vite](https://cn.vitejs.dev/)以加速开发体验。按照官方文档指导,在新建好的项目根目录下添加必要的配置文件和支持插件即可启用Vite模式。 #### 4. 添加状态管理-Pinia 鉴于Pinia已被认定为Vue官方推荐的状态管理模式之一,尤其适合于Vue3生态系统内的应用程序。可通过以下命令轻松集成到现有项目中: ```bash npm i pinia ``` 接着,在main.ts注册store实例,并按需定义模块化仓库(store)[^3]: ```typescript import { createApp } from 'vue' import App from './App.vue' // 导入pinia import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.mount('#app') ``` #### 5. UI框架-uView Plus的选择与运用 考虑到跨平台兼容性和美观度的要求,选用uView Plus作为UI组件库不失为明智之举。它不仅提供了丰富的样式资源,还特别针对uni-app做了优化处理。遵循[官方网站](http://www.uviewui.com/components/install.html)上的指引完成安装过程后,便可在页面内自由调用各类控件了[^1]。 #### 6. 开发调试技巧 借助VSCode编辑器的强大功能及其众多扩展插件的支持,能够显著提升工作效率。特别是当涉及到多端适配测试环节时,可尝试安装一些辅助性的DevTools以便更好地监控性能指标变化情况[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值