如何在Nuxt.js子页面中接入WordPress WooCommerce商城

下面是两种可行的实现方案，按体验优先级排序：

方案一：反向代理+WordPress站点URL配置（推荐） #

这种方案能让example.com/shop路径完全无缝映射到WooCommerce，用户体验和独立商城一致。

1. 配置WordPress与WooCommerce #

• 登录WordPress后台，进入设置→常规，修改：
  • 站点地址（URL）：设置为https://example.com/shop
  • WordPress地址（URL）：保持原WordPress服务器地址（比如https://your-wp-server.com）
• 进入WooCommerce→设置→高级，将商店页面设置为你已创建的商城页面（比如"Shop"），同时确保固定链接设置为文章名称（设置→固定链接），避免路径冲突。
• 修改WordPress主题的functions.php，添加代码强制资源路径适配新站点URL：

add_filter('script_loader_src', 'fix_asset_urls');
add_filter('style_loader_src', 'fix_asset_urls');
function fix_asset_urls($url) {
    if (strpos($url, get_option('siteurl')) === false) {
        $url = str_replace(get_option('home'), get_option('siteurl'), $url);
    }
    return $url;
}

2. 配置Vercel反向代理 #

在Nuxt项目根目录创建/修改vercel.json，添加重写规则，将/shop开头的所有路径转发到WordPress服务器：

{
  "rewrites": [
    {
      "source": "/shop(.*)",
      "destination": "https://your-wp-server.com$1"
    }
  ]
}

• 注意替换https://your-wp-server.com为你的WordPress实际服务器地址。
• 部署更新后的Nuxt项目到Vercel，等待生效。

方案二：Nuxt中嵌入iframe（快速临时方案） #

如果不想配置代理，可在Nuxt中创建pages/shop.vue页面，用iframe嵌入WooCommerce：

<template>
  <div style="width:100%; height:100vh; overflow:hidden;">
    <iframe 
      src="https://your-wp-server.com/shop" 
      style="width:100%; height:100%; border:none;"
      title="WooCommerce Shop"
    ></iframe>
  </div>
</template>

• 缺点：SEO不友好，且用户体验（如导航、登录状态）会有割裂感，仅适合临时测试。

注意事项 #

• 确保WordPress服务器配置了CORS，允许example.com的请求，否则会出现跨域问题。可在WordPress的.htaccess中添加：

Header set Access-Control-Allow-Origin "https://example.com"

• 测试所有商城功能（加购、结算、支付），确保路径跳转和资源加载正常。

内容的提问来源于stack exchange，提问作者Notik