Hbuilder本地调试微信H5项目(一)

摘要

通过内网穿透,访问本地Hbuilder创建的Vue项目

前置准备

  1. 下载并安装【HBuilder】,本文用的是HBuilder3.8.12版本,下载地址

  2. 下载并安装【微信开发者工具】,本文用的是1.06版本,下载地址

  3. 下载并安装【natapp】,下载地址

实现逻辑

  1. 本地使用Hbuilder进行开发并运行起来(配置为80端口)

  2. 使用natapp,获取本地穿透的域名地址

  3. 在微信公众平台,配置安全域名

  4. 使用本地穿透域名在微信开发者工具中访问系统

创建项目

创建uni-app的H5默认模板项目

配置启动端口为80

选中App.vue,【运行】-【运行到内置浏览器】

注册并启动natapp

注册后可在我的隧道中获取到免费的隧道

下载natapp,在config.ini中配置authtoken(在我的隧道列表中可获得)

编辑cinfig.ini文件,将authtoken填写到对应位置

双击natapp.exe启动,就会获取到一个域名,指向本机的80端口

直接访问这个域名即可访问到本地系统(因为是随机的,所以实际访问的时候和截图的不一样)

出现问题

Invalid Host header

解决办法:

打开manifest.json文件,打开【源码视图】,在【decServer】中添加【"disableHostCheck" : true】,即为跳过host检查

复制代码
    "h5" : {
        "devServer" : {
            "disableHostCheck" : true,
            "https" : false,
            "port" : 80
        }
    }
相关推荐
无心水18 分钟前
【Java面试笔记:基础】8.对比Vector、ArrayList、LinkedList有何区别?
java·笔记·面试·vector·arraylist·linkedlist
农民也会写代码28 分钟前
dedecms织梦arclist标签noflag属性过滤多个参数
开发语言·数据库·sql·php·dedecms
创码小奇客38 分钟前
MongoDB 时间序列:解锁数据时光机的终极指南
java·mongodb·trae
黯_森38 分钟前
Java面向对象
java·后端
代码小侦探40 分钟前
Java中以Maven方式引入Oracle JDBC Driver依赖的详解
java·oracle·maven
不畏惧的少年40 分钟前
AQS的底层实现原理
java
内网渗透1 小时前
Python 虚拟环境管理:venv 与 conda 的选择与配置
开发语言·python·conda·虚拟环境·venv
洛小豆1 小时前
饭票、图书馆、GC:这样理解 Java 引用,谁还不会?
java·后端·面试
SimonLiu0091 小时前
清理HiNas(海纳斯) Docker日志并限制日志大小
java·docker·容器
带刺的坐椅1 小时前
开发 MCP Proxy(代理)也可以用 Solon AI MCP 哟!
java·ai·llm·solon·mcp·mcp-server·mcp-client