如果你是一個前端開發(fā)人員率寡，在進(jìn)行移動端開發(fā)時，有時需要在真機(jī)上預(yù)覽效果废累，而公司又沒有提供內(nèi)網(wǎng)wifi邓梅，這時候可能開發(fā)就會卡在此處，讓人頭疼邑滨。
本教程就是告訴你日缨，如何通過xgrok代理本地的vue開發(fā)服務(wù)，并在移動終端上查看效果掖看。
步驟
- 修改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
}
})
- 在xgrok中添加網(wǎng)頁穿透
添加網(wǎng)頁穿透.png
名稱：填寫任意未被占用的名稱
WEB端口：填寫vue默認(rèn)開發(fā)端口8080
- 啟動穿透
啟動穿透.png
- 手機(jī)訪問代理出來的地址
訪問代理出來的地址.png
手機(jī)訪問代理后的網(wǎng)頁.jpg
