Vue移動端項目如何使用手機預覽調試

 

最近在開發移動端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端項目； 
而後，手機微信掃描二維碼就能夠訪問啦

 

 

原文連接

https://blog.csdn.net/Lynn_yu/article/details/79912854