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
        }
    }
相关推荐
蓝澈11211 分钟前
弗洛伊德(Floyd)算法-各个顶点之间的最短路径问题
java·数据结构·动态规划
再见晴天*_*9 分钟前
logback 日志不打印
java·服务器·logback
mrbone1114 分钟前
Git-git worktree的使用
开发语言·c++·git·cmake·worktree·gitab
幽络源小助理18 分钟前
SpringBoot基于JavaWeb的城乡居民基本医疗信息管理系统
java·spring boot·学习
欧阳有财21 分钟前
[java八股文][Mysql面试篇]日志
java·mysql·面试
浪裡遊25 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
TDengine (老段)29 分钟前
使用 StatsD 向 TDengine 写入
java·大数据·数据库·时序数据库·iot·tdengine·涛思数据
真实的菜32 分钟前
JVM类加载系统详解:深入理解Java类的生命周期
java·开发语言·jvm
代码讲故事1 小时前
多种方法实现golang中实现对http的响应内容生成图片
开发语言·chrome·http·golang·图片·快照·截图
N_NAN_N1 小时前
类图+案例+代码详解:软件设计模式----原型模式
java·设计模式·原型模式