文章目錄

• • • • • 一、準備工作
        • • 1. 下載SwitchHosts
          • 2. 創建vue項目
          • 3. 啟動項目
          • 3. 請求驗證
          • 4. 域名訪問
          • 5. Invalid Host header
        • 二、電腦調試
        • • 2.1. 設置應用主頁
          • 2.2. PC企微登錄
          • 2.3. PC企微應用
          • 2.4. 更新驗證
          • 2.5. 跳轉頁面
        • 三、手機調試
        • • 3.1. 代理軟件
          • 3.2. 安裝，啟動
          • 3.3. 連接無線網
          • 3.4. 代理端口
          • 3.5. 手機連接無線網
          • 3.6. 設置代理
          • 3.7. 代理允許
          • 3.8. 手機企微登錄
          • 3.9. 效果圖
          • 3.10. 代理監控

一、準備工作

1. 下載SwitchHosts

https://blog.csdn.net/weixin_40816738/article/details/119602810
配置如下

127.0.0.1 tobdev.com

2. 創建vue項目

vue create qywx-inner-vue

在命令行執行，默認即可，直接按回車，快速創建項目

3. 啟動項目

cd qywx-inner-vue qywx-inner-vue>npm run serve

3. 請求驗證

訪問：http://localhost:8080/

4. 域名訪問

http://tobdev.com:8080/

5. Invalid Host header

出現Invalid Host header
解決方案
停止服務ctrl+c，重新啟動
在根目錄下執行

node_modules\.bin\vue-cli-service serve --host=tobdev.com

參考文檔：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

重新域名訪問

http://tobdev.com:8080/

二、電腦調試

企業微信配置H5
下面只寫關鍵步驟，詳情參考企業微信自建應用連接H5

2.1. 設置應用主頁

這里演示采用應用主頁效果模式進行演示

http://tobdev.com:8080/

2.2. PC企微登錄

掃描登錄即可

2.3. PC企微應用

點擊自建應用

2.4. 更新驗證

為了演示從企業微信應用訪問的是咱們的H5項目，下面修改主頁信息
在src/App.vue文件中的內容替換如下

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><a href="https://gblfy.com">訪問博客技術專欄</a></div> </template><script>export default {name: 'App', } </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

2.5. 跳轉頁面

點擊跳轉頁面

三、手機調試

手機電腦需要連接同一個無線網或者局域網

3.1. 代理軟件

下載代理軟件
charles:https://www.charlesproxy.com/download/

3.2. 安裝，啟動

一路下一步
啟動charles

3.3. 連接無線網

電腦連接無線wifi，Tenda_498F2B 2

3.4. 代理端口

查看代理端口，手機設置代理用

3.5. 手機連接無線網

手機連接無線wifi，Tenda_498F2B 2
配置代理

192.168.0.107

3.6. 設置代理

手機點擊保存

3.7. 代理允許

代理軟件點擊允許

3.8. 手機企微登錄

點擊工作臺-點擊-自建應用

3.9. 效果圖

3.10. 代理監控

總結

以上是生活随笔為你收集整理的企业微信_H5应用如何本地及真机调试_host配置及代理相关的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。