VUE 内网穿透 发布 手机端调试 valid host 解决方法_vue allowedhosts

今天做H5项目遇到个别安卓手机报错,打不开页面,但苦于没有外网地址,装了vconsole也没法在手机端进行调试, 随经过苦苦查找,发现一完美解决方法,可通过内网穿透的方式访问我本地调试的地址,进而可以实时的进行代码的修改验证.

具体做法是:

        1. 下载Cpolar (因为免费,且满足最基本的使用)

             地址: cpolar - 安全的内网穿透工具

              下载后打开一个管理页,自己傻瓜式配置下就行,不再赘述(就是把你本地启动的前端代码地址端口做下映射)

        2. 重点来了,当你配置完后打开cpolar给你分配的外网地址,你会发现报invalid host 错误,这个时候就需要你把你项目里的webpack中加一段配置

        也就是在你的 vue.config.js 文件中加一段这个配置,就可以完美解决了

 也就是在devServer中加入 (据说是关闭host检测)

historyApiFallback: true,
allowedHosts: 'all'

当然以上是webpack5的配置项,webpack4的配置项跟这个不同,需要的自行度娘,提供大家一个思路,也记录下自己解决方法。