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

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

• 参照 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 地址，然后把这个 hosts 文件添加到 Virtual Hosts，最后开启 Virtual Hosts；
• 在手机微信访问 http://baidu.com 就能调试公众号网页，注意不是 https；

相关笔记：

• GatsbyJS 和 Next.js 如何在手机调试网站