Vue移動端項目實現(xiàn)使用手機預(yù)覽調(diào)試操作
更新時間：2020年07月18日 13:41:38 作者：上官孜然
這篇文章主要介紹了Vue移動端項目實現(xiàn)使用手機預(yù)覽調(diào)試操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近在開發(fā)移動端Vue移動端項目，查了一些資料，這里分享下如何在webpack工具構(gòu)建下的vue項目，在手機端調(diào)試和預(yù)覽，言歸正傳。
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移動端項目實現(xiàn)使用手機預(yù)覽調(diào)試操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue事件監(jiān)聽函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽函數(shù)on中的this指針域使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于如何使用vue3簡單實現(xiàn)WebSocket通信的相關(guān)資料,WebSocket是全雙工網(wǎng)絡(luò)通信通信協(xié)議,實現(xiàn)了客戶端和服務(wù)器的平等對話,任何一方都可以主動發(fā)送數(shù)據(jù),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue配置多代理服務(wù)接口地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue.js路由管理器 Vue Router，主要介紹的是路由元信息，命名路由以及嵌套路由等使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
Vue3實現(xiàn)動態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開發(fā)工作過程中，我們會遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯。本文為大家介紹了Vue3實現(xiàn)動態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下2022-11-11
這篇文章主要為大家介紹了Vue-cli來構(gòu)建Vue項目的步驟，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Axios是一個基于Promise的HTTP客戶端，用于瀏覽器和Node.js，這篇文章主要介紹了axios在Vue3中的使用,需要的朋友可以參考下2023-07-07
詳解如何在Vue3使用＜script lang=“ts“ setup＞語法糖
本文主要介紹了在Vue3使用＜script lang=“ts“ setup＞語法糖，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本篇文章主要介紹了vue-cli配置環(huán)境變量的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07