使用xgrok進(jìn)行vue開發(fā)的代理配置

如果你是一個前端開發(fā)人員，在進(jìn)行移動端開發(fā)時，有時需要在真機上預(yù)覽效果，而公司又沒有提供內(nèi)網(wǎng)wifi，這時候可能開發(fā)就會卡在此處，讓人頭疼。

本教程就是告訴你，如何通過xgrok代理本地的vue開發(fā)服務(wù)，并在移動終端上查看效果。

點我下載xgrok

步驟

  1. 修改vue.config.js配置

禁用host檢查

// vue_cli v4
module.exports = {
    devServer: {
        disableHostCheck: true,
        host:'0.0.0.0'
    }
}
// vue_cli v5 
module.exports = {
    devServer: {
        allowedHosts: 'all',
        host:'0.0.0.0'
    }
}

// vite
export default defineConfig({
    server:{
        allowedHosts: 'all',
        host: true
    }
})
  1. 在xgrok中添加網(wǎng)頁穿透
添加網(wǎng)頁穿透.png

名稱：填寫任意未被占用的名稱

WEB端口：填寫vue默認(rèn)開發(fā)端口8080

  1. 啟動穿透
啟動穿透.png
  1. 手機訪問代理出來的地址
訪問代理出來的地址.png
手機訪問代理后的網(wǎng)頁.jpg
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容