Vue React 根据访客 IP 显示地区活动模块

接口说明

浏览器端调用检测访客 IP，返回的是访客的 IP、国家、地区和城市信息，适合地区化内容展示。

{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}

应用场景

这些场景都能体现 IP 信息接口价值，并明确区分服务器 IP 与访客 IP。

• 根据国家显示地区化内容
• 显示不同购买、客服或支付提示
• 切换落地页 CTA 或活动模块
• 引导用户进入合适的支持入口
• 不创建多套页面也能优化地区体验

实现逻辑

实现前先确认请求发起方：服务器发起请求得到服务器 IP，浏览器发起请求得到访客 IP。

• 先输出默认内容
• 浏览器请求 https://my.ipin.io/info
• 读取返回的 country、region、city、ip
• 根据 country 从映射表选择内容或链接
• 接口失败时保留默认内容

代码示例

以下代码都直接使用 https://my.ipin.io/info，注释和界面文字均已本地化。

React

import { useEffect, useState } from "react";
const defaultCampaign = { title: "欢迎访问本站，这是默认内容。", url: "/signup" };
const campaignMap = { TW: { title: "台湾地区用户内容", url: "/tw" }, US: { title: "美国地区用户内容", url: "/us" }, JP: { title: "日本地区用户内容", url: "/jp" } };
export default function GeoCampaign() {
  const [campaign, setCampaign] = useState(defaultCampaign);
  useEffect(() => {
    let cancelled = false;
    fetch("https://my.ipin.io/info")
      .then(res => res.json())
      .then(info => { if (!cancelled) setCampaign(campaignMap[info.country] || defaultCampaign); })
      .catch(() => { if (!cancelled) setCampaign(defaultCampaign); });
    return () => { cancelled = true; };
  }, []);
  return <a href={campaign.url}>{campaign.title}</a>;
}

Vue

<template>
  <a :href="campaign.url">{{ campaign.title }}</a>
</template>
<script>
const defaultCampaign = { title: "欢迎访问本站，这是默认内容。", url: "/signup" };
const campaignMap = { TW: { title: "台湾地区用户内容", url: "/tw" }, US: { title: "美国地区用户内容", url: "/us" }, JP: { title: "日本地区用户内容", url: "/jp" } };
export default {
  data() { return { campaign: defaultCampaign }; },
  mounted() {
    fetch("https://my.ipin.io/info")
      .then(res => res.json())
      .then(info => { this.campaign = campaignMap[info.country] || defaultCampaign; })
      .catch(() => { this.campaign = defaultCampaign; });
  }
};
</script>

SEO 与体验建议

默认内容应完整可读，地区化内容作为增强体验出现。这样搜索引擎可以抓取稳定内容，接口失败时用户也能继续使用页面。

常见错误

以下问题会影响文章准确性、代码可运行性和接口介绍可信度。

• 不要删除默认内容
• 不要把服务端调用当成访客 IP 判断
• 不要缓存最终个性化 HTML 给所有人
• 多个模块应使用唯一 ID 或 class
• 必须处理接口失败和网络超时

总结

该场景的重点是访客 IP 地区化。浏览器端调用接口能获得访客所在地区，并在默认内容基础上增强页面体验。

常见问题

下面的问答围绕本文场景单独整理，问题和答案都与当前文章直接相关。