在 nuxt 生成的 html 中添加静态文本答案

【问题标题】：Add static text in html generated by nuxt在 nuxt 生成的 html 中添加静态文本
【发布时间】：2020-05-11 19:37:43
【问题描述】：

我有一个 nuxt 应用，我想为我的所有路由创建静态 html 文件。

我成功生成了我的静态文件。

所以在运行nuxt generate 之后，我有例如这些文件夹里面有index.html：

我的问题就在这里。

在我的页面中我想要这个：

<h1>Buy {{fruit_name}}</h1>

我希望 fruit_name 在生成的 html 文件上保持静态。

所以例如对于我想要的最终 html 中的苹果：

<h1>Buy apple</h1>

现在 apple 是空的。

那么我应该怎么做才能在生成时间根据路由名称设置这个变量。

假设我的路线是不变的，我将路线设置在nuxt.config.js

更新

我尝试在生成的 html 文件中更改它们，但是当我提供它时，更改未应用。为什么？

【问题讨论】：

【解决方案1】：

我找到了解决办法：

生成路由时将有效负载传递到相关页面：

{
  route: `/fruit/${name}`,
  payload: { fruitName: name }
},

并在asyncData钩子中设置数据：

async asyncData({ params, error, payload }) {
  if (payload) {
    return {
      name: payload.name
    }
  }
}

这里是组件中的一个数据集，可以通过组件访问它，它是静态的，并在每个路由生成的html文件中设置。

【讨论】：