Question

我以前曾使用Gatbsy用无头的Wordpress构建静态站点，即使从Wordpress获取图像（功能图像或ACF字段）时，生成的内部版本也包含这些图像……非常酷。

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

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

我希望它在生成网站时实际捕获该图像，然后将其包含在build文件夹中，这样，一旦该网站上线，它就不必查询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>

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

0 个答案: