在本地调试微信公众号网页

在掘金看到这篇文章：调试不方便？我直接把公众号网页线上环境搬到本地。我参考文章的步骤，在我的电脑操作了一遍，但和原文有些不同。

电脑端调试

参照 Vite 文档，创建一个项目：npm create vite@latest；
在项目根目录创建 Vite 配置文件，如果这个文件还没有的话，在配置文件中增加 server 和 preview 配置，例如：

//vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  server: {
    host: "0.0.0.0",
    port: 80,
  },
  preview: {
    host: "0.0.0.0",
    port: 80,
  },
  plugins: [react()],
});

用管理员管限打开 macOS 中的 hosts 文件：sudo vim /etc/hosts；
在 hosts 文件中添加：127.0.0.1 baidu.com，注意把 baidu.com 替换成你的域名；
这时通过 npm run dev 拉起 Vite 本地服务器，在浏览器输入 http://baidu.com 就能访问你正在开发的网页，注意不要用 https，如果浏览器自动跳转 https 就打开浏览器的隐私模式访问；

以上就是在本地电脑调试公众号网页的方法。

微信公众号网页的部分 API 需要在手机上调试，接下来是手机调试的操作步骤。

安卓端调试

电脑和手机需要位于同一 Wi-Fi 网络下；
找到电脑在这个 Wi-Fi 内的 IP 地址，对于 macOS，可以打开设置 - 网络 - Wi-Fi - 详细信息，在 IP 地址处查看；
使用安卓手机安装一款叫 Virtual Hosts 的应用，同时创建一个 hosts.txt 文件，写入 192.168.50.86 baidu.com，注意把 192.168.50.86 替换为你电脑的 IP 地址，把 baidu.com 替换为你的域名，最后把这个 hosts 文件添加到 Virtual Hosts 并打开运行；
在手机微信访问你的域名就能调试公众号网页，注意调试时的域名是 http，不要使用 https，正式发布上线后才用 https；

iOS 端调试

第一步和第二步请参考安卓端调试。

第三个步骤是安装一款叫 Shadowrocket 的软件，并对它进行以下设置：

首页 - 全局路由，设置为“直连”；
配置 - 点击被启用的那个本地配置文件旁边的问号，点击 Hosts，然后参考安卓端调试的第三个步骤，添加一个 Host 记录；
打开 Shadowrocket 首页的开关，然后在微信客户端打开你的域名，即可进行调试；

Shadowrocket 也有安卓客户端，所以安卓手机其实也可以用这种方法调试公众号网页。