Question

我最近将my site从Drupal转换为Vue，它目前正在作为常规Vue应用程序运行。出于SEO（和其他原因），我正在努力将其转换为使用Nuxt，并且在弄清楚如何将私有API密钥设置为环境变量以及如何在Butter库和{ {3}}。使用asyncData()，我可以使它在SPA中正常工作，但是在Nuxt中无法使用相同的功能。

在我的SPA中，我只是将API_KEY添加到dev.env.js，然后在buttercms.js中有这两行：

import Butter from 'buttercms'
export const butter = Butter(process.env.API_KEY)

，然后在我的组件中：

<script>
import { butter } from "@/buttercms";
...
methods: {
  getPost() {
  butter.post.retrieve(this.$route.params.slug)
    .then(res => {
       this.post = res.data;
    })
    .catch(res => {
      console.log(res);
    });
  }
},

效果很好。在Nuxt中，我像这样在nuxt.config.js中设置我的API密钥：

env: {
  API_KEY: process.env.API_KEY || '1234567890'
},

与buttercms.js相同的内容，如上所列，然后在我的组件中：

<script>
import { butter } from "buttercms";
export default {
  asyncData(context) {
    return butter.page
      .retrieve("static_page", "about-smga")
      .then(res => {
        console.log(res.data.data);
        return {
          page: res.data.data
        };
      })
      .catch(res => {
        console.log(res);
      });
  },
...
</script>

但是，当我运行它时，出现一个错误Cannot read property 'page' of undefined，告诉我没有使用Butter库。显然我做错了，但是我不确定。我需要进行哪些更改才能使用butter通话中的asyncData()？

Answer 1

您要从组件中的buttercms模块导入黄油类。但是它没有初始化。您可以将初始化放入plugins / buttercms.js中，然后将其添加到nuxt.config中的plugin部分中。

org.mongodb.driver.cluster - Exception in monitor thread while connecting to server <hostname>

然后您可以通过this。$ butter在组件中引用初始化实例

无法通过asyncData（）

1 个答案: