预览模式

使用预览模式实现静态托管的实时预览

使用 Nuxt 和全静态模块，可以立即使用调用 API 或 CMS 的实时预览功能，并在部署前确认变更内容。

仅在使用 target:static 时可用

内部使用 $nuxt.refresh，在客户端调用 nuxtServerInit、asyncData 和 fetch，因此预览模式下页面数据会自动更新。

要启用实时预览，需要添加以下插件：

plugins/preview.client.js

export default function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

enablePreview 仅在插件的 context 对象中可用。由于预览在客户端处理，插件（本例中为 preview.client.js）需要仅在客户端运行。

nuxt.config.js

export default {
  plugins: ['~/plugins/preview.client.js']
}

添加该插件后，即可立即生成并提供站点服务。

Yarn

yarn generate
yarn start

NPX

npx nuxt generate
npx nuxt start

然后在想要预览的页面末尾添加以下查询参数即可查看预览：

?preview=true

请使用 yarn start 而非 yarn dev 在本地测试 enablePreview。

尚未生成的页面存在于 API 中，但尚未生成为静态页面，因此 SPA 回退会在显示 404 页面之前调用 API。

如果设置了 validate 钩子，可能需要修改 validate 钩子，以避免在预览模式下重定向到 404 页面。

validate({ params, query }) {
  if (query.preview) {
    return true
}

可以向 enablePreview 函数传递数据。该数据可通过 $preview 上下文助手和 this.$preview 使用。