目标：“静态”不在 nuxt 中预渲染答案

【问题标题】：target: 'static' does not pre-render in nuxt目标：“静态”不在 nuxt 中预渲染
【发布时间】：2021-10-30 21:50:47
【问题描述】：

我确实有一个 Nuxt 应用程序，我从商店内 nuxtServerInit() 中的 API 获取内容。

但是，如果我确实在 nuxt.config.js 中生成了静态版本设置 target: "static"，则内容也不会在页面中预渲染，而我设置它“通用”，那么它们就是。

如果您想完全静态，“静态”不是正确的设置吗？

这是我的nuxt.config.js 文件

// import colors from 'vuetify/es5/util/colors'

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  // target: process.env.NODE_TARGET === 'static' ? 'static' : 'server',
  // ssr: true,
  target: 'universal',
  router: {
    base: '/wip/roboat-website/roboat-frontend/dist',
    routeNameSplitter: '/'
  },
  server: {
    host: "localhost" // default: localhost
  },
  head: {
    titleTemplate: '%s - roboat-frontend',
    title: 'roboat-frontend',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/css/custom.css'
  ],
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/vuetify
    ['@nuxtjs/vuetify', { treeShake: true }]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},
  env: {
    NUXT_ENV_API_HOST: process.env.NUXT_ENV_API_HOST,

  },
  // PWA module configuration: https://go.nuxtjs.dev/pwa
  pwa: {
    manifest: {
      lang: 'en'
    }
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    optionsPath: './vuetify.options.js',
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    // defaultAssets: false,
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        minifyURLs: true,
        removeComments: true,
        removeEmptyElements: true
      }
    },
    // analyze: true,
    optimizeCSS:true,
    extractCSS: true,
    babel: {
      plugins: [
        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
      ]
    },
    extend(config, { isDev, isClient }) {
      // ..
      // if (isClient) {
      config.module.rules.push({
        test: /\.(obj|mtl|fbx|gltf|glb|hdr|bin)$/,
        loader: 'file-loader'
      })
    },
    transpile: [
      "three"
    ]
  },
}

【问题讨论】：

您能否分享您的nuxt.config.js 并解释一下这里没有预渲染的内容？
另外，这是您其他问题的答案：stackoverflow.com/a/68272664/8816585
这是文件：dropbox.com/s/b3qnp097epbuw43/nuxt.config.js?dl=0 是的，这应该是答案，但 target:static 和 ssr:true 不会预渲染静态页面， target:universal 会..
我已经用您的代码的文本版本编辑了您的问题。问题出在其他地方，不要专注于universal。另外，你能分享一下没有生成的东西吗？（请为此编辑您的问题）
其实我认为你是对的，我改变了负责获取数据的函数，现在可以工作了。

标签： nuxt.js vuex server-side-rendering strapi

【解决方案1】：

看起来最后，OP 确实有一个带有target: 'static' 和ssr: true 的工作代码。
这似乎是合法的，因为它是推荐的（并且是最新的）做事方式：How to setup Nuxt for an isomorphic universal app?

【讨论】：