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

【问题标题】：Contentful with Nuxt.JS "Expected parameter accessToken"Nuxt.JS “预期参数 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 文件的编辑版本？

标签： javascript vue.js axios nuxt.js contentful

【解决方案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 文件中的变量

【讨论】：