如何使用手机访问H5页面

前置条件

1. 手机和电脑处于同一个局域网下（同一个WiFi下）
2. 电脑防火墙需要关闭

1. 修改vite.config.ts文件

在配置文件中新增server的配置：

export default defineConfig({
  server: {
    host: '0.0.0.0', // 打开通过IP地址访问的开关
    port: 3333,
    open: true, // 自动打开浏览器
    cors: true, // 允许跨域
  },
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src'),
      },
    ],
  },
});

此时使用下面的访问方法，手机上是可以访问页面的，但由于还没有修改接口地址，所以还不能发送接口。

2. 修改后端接口的地址

重新启动项目后，在终端可以看到IP地址：

在浏览器中使用IP地址也能成功访问后即第一步的配置成功。

const httpLink = createHttpLink({
  uri: '//172.16.0.212:3000/graphql',
});

最后将后端接口的地址修改为相同的IP后，手机就可以访问并向后端发送请求了。

访问方法

使用Google浏览器 -> 右上角控制按钮 -> 投放、保存和分享 -> 创建二维码 -> 微信扫一扫就可以访问啦！