如何在手机端查看PC端上的Vue项目(二)----外网环境

在《如何在手机端查看PC端上的Vue项目(一)》这篇文章中介绍了如何在同一网络下通过配置Vue项目的host实现在手机端查看Vue项目，但是这种方法毕竟有局限性，如果是台式机就不行了，所以今天介绍一下如何实现手机通过外网也能访问PC端的Vue项目
准备工作：
如何在手机端查看PC端上的Vue项目(一) 介绍了如何查看本机IP及配置Vue文件
花生壳官网 注册账号、下载客户端
草料二维码官网 用于将网址转为二维码

1、查看本机IP、修改Vue项目中的配置

上面的参考文章中已经介绍了如何查看本机IP并配置Vue文件，这里就不在赘述

2、注册花生壳、设置内网映射

2.1、点击上方花生壳官网链接，并注册账号，下载客户端

2.2、客户端登录后打开如下图所示，点击右下角加号

2.3、选择内网映射

2.4填写配置信息，最后点击保存

                                                      图1

应用名称：随意
应用类型：因为我们一般都是访问的网页，所以选择 HTTP80,你也卡哇伊选择 通用
外网域名：这是你注册账号后，花生壳免费给你的，因为免费，所以看起来比较乱，想要好记的，你懂，money~~~~
往外端口：不用设置，也没法设置，默认80
内网主机：就是你电脑的IP,同时你Vue中配置的 host也得是这个
内网端口：就是你Vue中配置的 port,记得别和其他端口号冲突

如上图所示，内网映射就好了，这里最好再点一下上图中的 诊断,如下图所示，就说明映射成功了，这个 诊断域名就是花生壳给我们生成的外网域名，稍后就可以通过这个域名访问本地的Vue项目

3、启动本地vue项目

4、通过手机访问vue项目

4.1、方法一：在手机浏览器地址栏输入花生壳生成的域名，不过看起来似乎有点难度

4.2、方法二：点击分享，扫描二维码

4.3、方法三：复制生成的域名（客户端不能制止，网页版花生壳可以复制），打开草料二维码官网，将域名转为二维码，然后扫描

这种方法好像哈儿方法二重复了，不过没关系，建议收藏 草料二维码，里面还是有其他很多实用功能的

5、问题出现了

在我们通过上面的方法访问Vue项目的时候，却出现了下面的结果

Invalid Host header，不知道啥意思？，有道词典你值得拥有

百度了一下，是因为新版的webpack-dev-server出于安全考虑， 默认检查hostname，如果hostname不是配置内的就不能访问，所以我们要做的就是跳过 hostname检查 参考文章

注意：我的是 vue2.0, vue-cli3.0构建项目目录中没有build和config目录，添加自定义配置需要在项目跟目录中添加vue.config.js，注意是跟目录非src下。 Vue-cli3.0添加vue.config.js自定义配置

重启Vue项目，用手机外网访问项目