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

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

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

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

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

2.一、点击上方花生壳官网连接，并注册帐号，下载客户端

2.二、客户端登陆后打开以下图所示，点击右下角加号

2.三、选择内网映射

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

图1

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

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

三、启动本地vue项目

四、经过手机访问vue项目

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

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

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

这种方法好像哈儿方法二重复了，不过不要紧，建议收藏 草料二维码，里面仍是有其余不少实用功能的

五、问题出现了

在咱们经过上面的方法访问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项目，用手机外网访问项目