求助：nuxt-stripejs报错publishableKey is required本地项目部署问题

以下是针对该问题的排查和解决步骤：

• 修正环境变量命名规则
  Nuxt中客户端可访问的环境变量必须以NUXT_ENV_为前缀，将你的.env.dev文件里的STRIPE_PUBLISHABLE_KEY修改为NUXT_ENV_STRIPE_PUBLISHABLE_KEY。因为nuxt-stripejs是前端运行的插件，无法直接读取不带该前缀的环境变量。

• 确认nuxt-stripejs模块配置
  在nuxt.config.js中正确配置模块，确保直接传入环境变量：

  export default {
    modules: [
      ['nuxt-stripejs', {
        publishableKey: process.env.NUXT_ENV_STRIPE_PUBLISHABLE_KEY
      }]
    ]
  }
  

  若使用Nuxt 2.13及以上版本，也可通过publicRuntimeConfig传递变量：

  export default {
    publicRuntimeConfig: {
      stripePublishableKey: process.env.NUXT_ENV_STRIPE_PUBLISHABLE_KEY
    },
    modules: [
      ['nuxt-stripejs', {
        publishableKey: process.env.NUXT_ENV_STRIPE_PUBLISHABLE_KEY
      }]
    ]
  }
  

• 强制重启Nuxt开发服务器
  修改.env相关文件后，必须重启npm run dev或yarn dev服务，否则新的环境变量不会被加载，这是高频踩坑点。

• 验证环境变量是否生效
  在任意Vue组件中添加调试代码，确认变量是否被正确读取：

  mounted() {
    console.log('当前Stripe密钥:', process.env.NUXT_ENV_STRIPE_PUBLISHABLE_KEY)
  }
  

  如果控制台输出undefined，说明环境变量未加载成功，可检查以下内容：

  • 确认.env.dev文件位于项目根目录下
  • 启动项目时指定环境文件：执行nuxt --dotenv .env.dev，或在nuxt.config.js顶部添加：

    require('dotenv').config({ path: '.env.dev' })
    

  • 检查.env.dev里的变量是否存在多余空格，比如STRIPE_PUBLISHABLE_KEY= pk_test_xxx（密钥前的空格会导致无效）

• 自定义插件引入的额外检查
  若你是通过自定义插件引入vue-stripe而非nuxt-stripejs模块，需确保插件内正确传入密钥：

  // plugins/stripe.js
  import Vue from 'vue'
  import { StripePlugin } from '@vue-stripe/vue-stripe'
  
  Vue.use(StripePlugin, {
    publishableKey: process.env.NUXT_ENV_STRIPE_PUBLISHABLE_KEY
  })
  

  同时在nuxt.config.js的plugins数组中注册该插件。

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