Nuxt 网站未从服务器渲染应用程序

Question

我正在尝试在我的 nuxt 网站上实现 SSR，但似乎 static 页面没有从服务器端呈现。 路线生成正确，动态元信息不会显示在页面源上，但在我检查元素时可以看到。

我的 nuxt.config.js 文件：

import colors from 'vuetify/es5/util/colors'
import axios from 'axios'
require('dotenv').config()

export default {
  target: 'static',
  /*
   ** Headers of the page
   */
  head: {
    titleTemplate: '%s',
    title: 'Page Title',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content:
          'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0'
      },
      { name: 'mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    script: [
      {
        src: 'https://cdn.jsdelivr.net/npm/pwacompat@2.0.9/pwacompat.min.js',
        integrity:
          'sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc',
        crossorigin: 'anonymous',
        defer: true
      },
      {
        hid: 'tawk.to',
        src: 'https://embed.tawk.to/5c3f330751410568a106e6e1/default',
        defer: true
      }
    ]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#FECC0A' },
  /*
   ** Customize the loading indicator
   */
  loadingIndicator: {
    name: 'folding-cube'
  },
  /*
   ** Global CSS
   */
  css: ['~/assets/scss/main.scss'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    { src: '~/plugins/vue-pdf.js', ssr: false },
    { src: '~/plugins/localStorage.js', ssr: false },
    { src: '~/plugins/axios.js' },
    { src: '~plugins/ga.js', mode: 'client' }
  ],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    '@nuxtjs/vuetify',
    '@nuxt/typescript-build',
    '@nuxtjs/moment',
    '@nuxtjs/dotenv'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    'nuxt-webfontloader',
    '@nuxtjs/toast'
  ],

  manifest: {
    name: 'MyApp',
    short_name: 'MyApp'
  },

  env: {
    baseUrl:
      process.env.BASE_URL || 'https://my-app.herokuapp.com/api/v1/',
    raveKey:
      process.env.RAVE_KEY
  },
  /*
   ** Webfontloader module configuration
   ** See https://github.com/Developmint/nuxt-webfontloader#readme
   */
  webfontloader: {
    google: {
      families: ['Montserrat:300,400,500,600,700,900&display=swap']
    }
  },

  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** vuetify module configuration
   ** https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    defaultAssets: {
      font: false
    },
    treeShake: true,
    theme: {
      dark: false,
      themes: {
        light: {
          primary: '#0E163D',
          accent: '#333333',
          secondary: '#FECC0A',
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/_nuxt/',
    extend(config, ctx) {}
  }
}

其中一页：

export default Vue.extend({
  head () { 
      let templateName = this.template?.title || 'Standard'
      console.log(templateName)
      console.log(this.template?.title)
    return {
      title: `${templateName}`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Standard'
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: `Standard, Contracts, ${this.template?.title}`
        }
      ]
    }
  },
    async asyncData( payload: any ) {
      if (payload) {
      return { template: payload };
      }
    },

  // code
})
</script>

我不确定问题到底出在哪里，因为它在我构建的一个较小的应用程序上运行良好。 但我注意到较小应用程序上的 HTML 标记显示了这个<!doctype html> <html data-n-head-ssr>而这个显示了这个<:doctype html> <html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D"> .

任何帮助将不胜感激。

Answer 1

看来你的目标错了。 尝试删除

target: 'static'

从你的nuxt.config.js 。 当您删除它时，它应该回退到server ：

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-target/