最近在開發移動端Vue移動端專案，查了一些資料，這裡分享下如何在webpack工具構建下的vue專案，在手機端除錯和預覽，言歸正傳。

1.電腦和手機連線到同一個WIFI

a.臺式電腦和手機同時連結一個路由器，使用同一個wifi；

b.筆記本也可以直接啟用一個wifi，手機連結筆記本wifi也可以；

2.查詢本地IP地址

WIN+R，輸入cmd回車，開啟命令提示符，輸入ipconfig，檢視本地IPv4；

3.修改本地專案中IP地址

找到專案中config資料夾，下面index.js檔案開啟；

找到host: ‘localhost',改為上面本地IPv4地址；

module.exports = {
dev: {
 host: '192.168.0.107',// 原為: hotst: 'localhost'
 }
}

4.製作二維碼

藉助二維碼生成工具修改後專案生成二維碼。當然不嫌麻煩，位址列手動輸入也可以。https://cli.im/

5.重新啟動專案

重新啟動專案，然後瀏覽器地址輸入本機地址http://192.168.0.107:8080 訪問專案PC端專案；

然後，手機微信掃描二維碼就可以訪問啦！

以上這篇Vue移動端專案實現使用手機預覽除錯操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。