Nuxt3集成Stripe报错求助：原配置失效及兼容方案咨询

一、错误原因拆解 #

你遇到的[vite-node] [ERR_LOAD_URL] express错误，核心问题是Stripe官方SDK是Node.js专属库，无法在浏览器（客户端）环境中导入执行。路由中间件默认是全栈运行（客户端+服务端），当中间件在客户端触发时，直接导入Stripe就会触发环境不兼容的报错。

二、Nuxt3兼容的Stripe配置示例 #

1. 安装依赖 #

直接使用官方Stripe SDK，放弃第三方未适配Nuxt3的模块：

npm install stripe
# 或
yarn add stripe

2. 配置环境变量 #

在项目根目录.env文件中添加密钥：

STRIPE_SECRET_KEY=sk_你的私密密钥
STRIPE_PUBLISHABLE_KEY=pk_你的公开密钥

3. 创建服务端Stripe实例插件 #

在server/plugins/stripe.ts中创建仅服务端运行的Stripe实例，避免客户端调用：

import Stripe from 'stripe'

export default defineNitroPlugin(() => {
  const config = useRuntimeConfig()
  const stripe = new Stripe(config.stripeSecretKey, {
    apiVersion: '2024-06-20', // 匹配最新API版本
    typescript: true
  })

  // 将实例挂载到NitroApp，方便服务端全局调用
  nitroApp.stripe = stripe
})

// 新增TS类型声明，避免类型报错
declare module 'nitropack' {
  interface NitroApp {
    stripe: Stripe
  }
}

4. 配置Nuxt运行时变量 #

在nuxt.config.ts中映射环境变量：

export default defineNuxtConfig({
  runtimeConfig: {
    stripeSecretKey: process.env.STRIPE_SECRET_KEY, // 仅服务端可见
    public: {
      stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY // 客户端可见
    }
  },
  // 按需加载Stripe客户端脚本
  app: {
    head: {
      script: [
        {
          src: 'https://js.stripe.com/v3/',
          async: true
        }
      ]
    }
  }
})

5. 订阅检查的正确实现 #

不要在客户端中间件直接调用Stripe，推荐两种方案：

方案A：服务端专属中间件

在server/middleware/check-subscription.ts中创建仅服务端运行的中间件：

export default defineEventHandler(async (event) => {
  // 从认证上下文获取当前用户ID（需配合你的用户认证逻辑）
  const userId = event.context.user?.id
  if (!userId) {
    return sendRedirect(event, '/login')
  }

  // 调用Stripe API检查有效订阅
  const subscriptions = await event.context.app.stripe.subscriptions.list({
    customer: userId, // 假设用户ID对应Stripe的客户ID
    status: 'active'
  })

  if (subscriptions.data.length === 0) {
    return sendRedirect(event, '/subscribe')
  }
})

方案B：客户端中间件调用服务端API

先创建服务端API接口server/api/check-subscription.ts：

export default defineEventHandler(async (event) => {
  const userId = event.context.user?.id
  if (!userId) {
    return { valid: false }
  }

  const subscriptions = await event.context.app.stripe.subscriptions.list({
    customer: userId,
    status: 'active'
  })

  return { valid: subscriptions.data.length > 0 }
})

再在客户端中间件middleware/check-subscription.ts中调用：

export default defineNuxtRouteMiddleware(async (to, from) => {
  const { data: checkResult } = await useFetch('/api/check-subscription')
  
  if (!checkResult.value?.valid) {
    return navigateTo('/subscribe')
  }
})

6. 客户端支付表单示例（按需使用） #

如果需要在客户端创建支付界面，直接用Stripe.js：

<template>
  <div ref="cardElementContainer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const config = useRuntimeConfig()
const cardElementContainer = ref(null)

onMounted(() => {
  if (!window.Stripe) return
  const stripe = window.Stripe(config.public.stripePublishableKey)
  const elements = stripe.elements()
  
  const cardElement = elements.create('card')
  cardElement.mount(cardElementContainer.value)
})
</script>

三、核心注意事项 #

• Stripe私密密钥绝对不能出现在客户端代码中，所有密钥相关操作必须在服务端执行。
• 确保Stripe API版本与SDK版本匹配，避免版本不兼容报错。
• 路由中间件涉及Stripe操作时，要么限定在服务端运行，要么通过服务端API中转。

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