NuxtJS Headless ghost 无法查看个别博客

Question

我有一个在 SPA 模式下运行的现有 nuxtjs 页面，基本上只提供静态 html。我最近建立了一个无头鬼博客，并根据鬼网站上的教程添加了从网站拉取所需的代码。效果很好

    <template>
    <div class="container">
    <main>
        <h2> Latest Articles </h2>
        <ul>
            <li v-for="(post, index) in posts" :key="index">
                <img
          :src="post.feature_image"
          class="img-thumbnail lazy"
        />
        <div class="content">
            <span> {{ post.authors[0].name }}</span>
            <nuxt-link :to="{ path: post.slug }">{{ post.title }}</nuxt-link>
            <p> {{ post.excerpt }} </p>
        </div>
            </li>
        </ul>
    </main>
    </div>
    </template>

    <script>
    import { getPosts } from './../../api/posts';
    export default {
        async asyncData () {
          const posts = await getPosts();
          return { posts: posts }
        }
      }
    </script>

但是，当我单击链接转到博客文章时，我找不到页面。我查看了 Firefox 中的网络流量，我可以看到该应用程序正在尝试从本地主机中提取，例如。 localhost:3000/welcome 而不是 https:api.example.com/welcome

这是我的 _slug.vue 文件中的内容

    <template>
      <div class="container">
          <main>
              <h1>{{ post.title }}</h1>
              <div class="content">
                  <div v-html="post.html">{{ post.html }}</div>
              </div>
          </main>
      </div>
    </template>

    <script>
      import { getSinglePost } from './../../api/posts';

      export default {
        async asyncData ({ params }) {
          const post = await getSinglePost(params.slug);
          return { post: post }
        }
      }
    </script>
    <style lang="scss" scoped>
    header {
        height: 15em;
    }
    h1 {
        color: white;
        margin-bottom: 1em;
    }
    .content {
        background: white;
        border-radius: 1em;
        padding: 1em;
    }
    main {
        margin-top: -9em;
    }
    .content img {
        width: 100%;
    }
    @media only screen and (min-width: 768px) {
        .content {
            padding: 2em;
        }
    }
    </style>

还有我的 posts.js 文件

      import GhostContentAPI from "@tryghost/content-api";
      const api = new GhostContentAPI({
        url: 'https://api.example.com',
        key: 'xxxxx',
        version: "v3"
      });

      export async function getPosts() {
        return await api.posts
          .browse({
            limit: "all",
            include: "tags,authors,slug"
          })
          .catch(err => {
            console.error(err);
          });
      }
      export async function getSinglePost(postSlug) {
        return await api.posts
          .read({
            slug: postSlug
          })
          .catch(err => {
            console.error(err);
          });
      }

Answer 1

我制作了一个 _slug.vue 文件。我需要的是一个带有 index.vue 文件的 _slug 目录。我把所有东西都搬过来了，现在它可以正常工作了