如何在手機端查看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項目，用手機外網訪問項目