Vue移動端項(xiàng)目實(shí)現(xiàn)使用手機(jī)預(yù)覽調(diào)試操作
最近在開發(fā)移動端Vue移動端項(xiàng)目,查了一些資料,這里分享下如何在webpack工具構(gòu)建下的vue項(xiàng)目,在手機(jī)端調(diào)試和預(yù)覽,言歸正傳。
1.電腦和手機(jī)連接到同一個WIFI
a.臺式電腦和手機(jī)同時鏈接一個路由器,使用同一個wifi;
b.筆記本也可以直接啟用一個wifi,手機(jī)鏈接筆記本wifi也可以;
2.查詢本地IP地址
WIN+R,輸入cmd回車,打開命令提示符,輸入ipconfig,查看本地IPv4;
3.修改本地項(xiàng)目中IP地址
找到項(xiàng)目中config文件夾,下面index.js文件打開;
找到host: ‘localhost’, 改為上面本地IPv4地址;
module.exports = {dev: { host: ’192.168.0.107’, // 原為: hotst: ’localhost’ }}
4.制作二維碼
借助二維碼生成工具修改后項(xiàng)目生成二維碼。當(dāng)然不嫌麻煩,地址欄手動輸入也可以。https://cli.im/
5.重新啟動項(xiàng)目
重新啟動項(xiàng)目,然后瀏覽器地址輸入本機(jī)地址http://192.168.0.107:8080 訪問項(xiàng)目PC端項(xiàng)目;
然后,手機(jī)微信掃描二維碼就可以訪問啦!
以上這篇Vue移動端項(xiàng)目實(shí)現(xiàn)使用手機(jī)預(yù)覽調(diào)試操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP的Global.asa文件技巧用法2. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)3. ASP中if語句、select 、while循環(huán)的使用方法4. ASP中常用的22個FSO文件操作函數(shù)整理5. SharePoint Server 2019新特性介紹6. 告別AJAX實(shí)現(xiàn)無刷新提交表單7. Vue+elementUI下拉框自定義顏色選擇器方式8. PHP函數(shù)原理理解詳談9. XML入門的常見問題(四)10. 使用css實(shí)現(xiàn)全兼容tooltip提示框
