Nuxt.JS “预期参数 accessToken” 内容丰富

Posted 2023-02-22

【中文标题】Nuxt.JS “预期参数 accessToken” 内容丰富

【英文标题】：Contentful with Nuxt.JS "Expected parameter accessToken"

【发布时间】：2020-07-02 16:45:10

【问题描述】：

我创建了一个从 Contentful 中提取数据的页面。数据正确提取，但使用方法中的功能的按钮不起作用。变量的实时更新（例如，使用v-model）也不起作用。

我在控制台看到这个错误：

我认为这个错误是问题所在。有谁知道出了什么问题？我不知道如何解决它:(

我的 contentful.js：

const contentful = require('contentful')

const client = contentful.createClient(
  space: process.env.CONTENTFUL_ENV_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ENV_ACCESS_TOKEN
)

module.exports = client

提取数据的代码：

export default 
  layout: "landing_page",
  asyncData() 
    return client
      .getEntries(
        content_type: "landingPage"
      )
      .then(entries => 
        return  contentfulData: entries.items[0].fields ;
      );
  ,
  computed: 
    styles() 
      return landingPageCss;
    
  ,
  components: 
    priceBox,
    contact,
    home,
    aboutUs,
    footerDiv
  
;

【问题讨论】：

你试过输出process.env.CONTENTFUL_ENV_ACCESS_TOKEN的内容吗？也许环境没有正确加载？

@milgner 是的，它不起作用:(

那么问题来了：你是如何设置环境的？你在用https://www.npmjs.com/package/dotenv吗？通过其他机制？

是的，我使用 dotenv

好的，但是您的问题不在于 Nuxt 或 Contentful API，而是您的环境未正确加载？你应该添加一些关于你如何加载 dotenv 的代码，也许是你的 .env 文件的编辑版本？

【参考方案1】：

最好的方法是使用 dotenv 包。在.env 文件中设置您的环境密钥。

nuxt.config.js 文件应包含：

const env = require('dotenv').config()

export default 
  mode: 'universal',
  ...
  env: env.parsed,
  ...

看这个视频：https://codecourse.com/watch/using-env-files-with-nuxt

【参考方案2】：

如果您使用 dotenv，您需要执行以下步骤：

npm install --save-dev @nuxtjs/dotenv

然后你将它安装为一个模块。请注意，如果您使用的 Nuxt.js 早于 v2.9，那么您必须转到 nuxt.config.js 并将您的代码放入 module 部分：

...
   module: [
   '@nuxtjs/dotenv'
 ]
...

如果没有module 部分，则创建一个。

如果您使用较新的 v2.9，则将其放入 buildModules

  ...
   buildModules: [
   '@nuxtjs/dotenv'
 ]
...

现在可以通过context.env 或process.env 访问保存在.env 文件中的变量