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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用kbone解決Vue項(xiàng)目同時支持小程序問題
這篇文章主要介紹了使用kbone解決Vue項(xiàng)目同時支持小程序問題，本文通過一個todo的例子跟大家詳細(xì)介紹,需要的朋友可以參考下2019-11-11
key屬性是一個特殊的屬性，用于標(biāo)識每個節(jié)點(diǎn)的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會討論Vue2中的key和Vue3中的key的區(qū)別2023-04-04
vue watch普通監(jiān)聽和深度監(jiān)聽實(shí)例詳解(數(shù)組和對象)
這篇文章主要介紹了vue watch普通監(jiān)聽和深度監(jiān)聽(數(shù)組和對象)，文中單獨(dú)通過代碼給大家介紹了vue watch 深度監(jiān)聽的方法，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)添加與刪除圖書功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
今天小編就為大家分享一篇Vue通過ref父子組件拿值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗(yàn),Three.js是一款強(qiáng)大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復(fù)雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個簡單的交互式3D場景,需要的朋友可以參考下2023-11-11
本文介紹一個簡單的DrawerLayout（類似Android的DrawerLayout）布局組件的實(shí)現(xiàn)，基于Vue.js側(cè)滑菜單組件的實(shí)現(xiàn)代碼大家通過本文一起學(xué)習(xí)吧2017-12-12
Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue實(shí)現(xiàn)搜索結(jié)果高亮顯示關(guān)鍵字
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)搜索結(jié)果高亮顯示關(guān)鍵字，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決
這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10