vue nuxt js-组件级缓存不起作用

Question

我正在将vue js与nuxt一起使用，并且喜欢利用组件级缓存。因此，我遵循了两个链接，并试图将其集成到我们的we bapp中。但显然它似乎不适用于我的组件？

• nuxt js - how to cache vu components
• vue ssr guide - component level caching

我的组件只是包装了一个iframe，为了避免每次调用iframe的源时，我希望将其缓存

知道为什么这行不通吗？我想念这里吗？

我的组件

<template>
    <div id="footer-copyright-wrapper">
    <iframe id="frame-footer-copyright" src="http://targeturl" scrolling="no" frameBorder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"/>
    </div>
</template>
<script>
    export default {
    name: 'footer1', // required
    serverCacheKey: props => 'footer1',
 }
 </script>

我的nuxt js conig

const isProduction = (process.env.NODE_ENV === 'production')
const host = (isProduction) ? 'api.xxx.com' : 'localhost'
const scheme = (isProduction) ? 'https' : 'http'
const baseUrl = (isProduction) ? `${scheme}://${host}/rest-api` : `${scheme}://${host}:8080/rest-api`

export default {
  env: {
    api: {
      host: host,
      scheme: scheme,
      baseUrl: baseUrl
    },
  },
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      { src: 'https://www.paypalobjects.com/api/checkout.js' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    '@/assets/styles/global.scss'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/axios.js',
    '~/plugins/validate.js',
    '~/plugins/mq.js',
    '~/plugins/global.js',
    '~/plugins/print.js'
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '~/modules/nuxt-auth/lib/module/index.js',
    'nuxt-i18n',
    'nuxt-stripe-module',
    '@nuxtjs/component-cache',
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    baseURL: `${baseUrl}/`,
    https: (isProduction) ? true : false,
    progress: true,
    debug: false
  },
  /*
  ** Build configuration
  */
  build: {
    // Add exception
    transpile: [
      'vee-validate/dist/rules'
    ],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  },
  /*
  ** Router configuration
   */
  router: {
    middleware: [
      'auth',
      'auth-refresh'
    ]
  },
  /*
  ** Auth configuration
   */
  auth: {
    plugins: [
      '~/plugins/auth.js'
    ],
    redirect: {
      login: '/auth/login',
      logout: '/',
      home: '/',
      callback: '/auth/callback'
    },
    strategies: {
      local: {
        _scheme: 'local',
        name: 'local',
        endpoints: {
          login: {
            url: `${baseUrl}/auth/getAccessToken`,
            method: 'post',
            propertyName: false
          },
          refresh: {
            url: `${baseUrl}/auth/refreshAccessToken`,
            method: 'post',
            propertyName: false
          },
          logout: {
            url: `${baseUrl}/auth/logout`,
            method: 'post',
            propertyName: false
          },
          user: {
            url: `${baseUrl}/auth/user`,
            method: 'get',
            propertyName: false
          }
        },
        tokenRequired: true,
        tokenType: 'Bearer',
        tokenName: 'Authorization',
        globalToken: true,
        accessTokenKey: 'access_token',
        refreshTokenKey: 'refresh_token',
        automaticRefresh: true,
        expiration: {
          factor: 0.9,
          timeFormat: 'seconds'
        }
      }
    }
  },
  /*
  ** i18n configuration
   */
  i18n: {
    locales: [
      {
        code: 'en',
        name: 'English',
        file: 'en.json'
      },
      {
        code: 'de',
        name: 'Deutsch',
        file: 'de.json'
      },
      {
        code: 'fr',
        name: 'Français',
        file: 'fr.json'
      },
      {
        code: 'it',
        name: 'Italiano',
        file: 'it.json'
      }
    ],
    lazy: true,
    defaultLocale: 'de',
    langDir: 'locales/'
  },
}