wordpress - 具有无头 wordpress 的 Nuxt 静态站点 - 包括生成的构建中的图像

Question

我以前用 Gatbsy 用无头 Wordpress 构建静态站点，即使它从 wordpress（特色图像或 ACF 字段）获取图像，生成的构建也包含这些图像......非常酷。

换句话说，一旦站点生成，实时站点就不再需要向后端查询图像。

我正在尝试对 Nuxt 做类似的事情。问题是，即使在生成的构建中，它也在寻找 wordpress 后端的图像源，在这种情况下是我的本地主机。它仍在尝试从 localhost:3080/wp-content/uploads/etc 获取图像...

我希望它在生成网站时实际抓取该图像，然后将其包含在构建文件夹中，因此一旦网站上线，它就不必查询 wordpress 后端。

使用 Gatsby 非常简单，我从来没有真正想过它，但现在使用 Nuxt，我似乎找不到任何关于如何做到这一点的文档。有没有人弄明白的？

编辑：一些代码示例：

首先，在我的 Vuex 商店中：

export const state = () => ({
  cards: [],
})

export const mutations = {
  SET_CARDS(state, cards) {
    state.cards = cards.reverse()
  }
}

export const actions = {
  async nuxtServerInit({ commit, dispatch }) {
    const loaded = await dispatch('loadApp')

    console.log('LOADED', 'loaded')
  },

  loadApp({ dispatch }) {
    return Promise.all([
      dispatch('getCards'),
    ])
  },


  async getCards({ commit, dispatch }) {
    return new Promise(async (resolve, reject) => {
      try {
        const cards = await this.$wp.cpt('CARD')
        commit('SET_CARDS', cards)
        resolve(cards)
      } catch (error) {
        console.log('error:', error)
      }
    })
  },

“卡片”对象被传递到卡片组件中。v-if 循环遍历卡片中的每张卡片，将每个“卡片”传递给卡片组件。卡片组件内部：

<template>
  <div class="card">
    <img  :src="this.card.fields.acf.image.sizes.large" alt="icon">
    <h3>{{card.meta.headline[0]}}</h3>
    <p :class="isCenterCard ? 'center' : ''">{{card.meta.body[0]}}</p>
  </div>
</template>

标签： wordpressvue.jsnuxt.js