source

target: 'static'은 nuxt에서 사전 정의되지 않습니다.

goodcode 2022. 8. 18. 23:28
반응형

target: 'static'은 nuxt에서 사전 정의되지 않습니다.

스토어 내에 NuxtServerInit()의 API에서 콘텐츠를 추출하는 Nuxt 앱을 가지고 있습니다.

단, nuxt.config.js 내에 스태틱버전 설정 타깃인 "static"을 생성했을 경우 콘텐츠는 페이지 내에서 사전 렌더링되지 않고 "universal"로 설정되어 있는 동안 렌더링됩니다.

완전 스태틱으로 하려면 '스태틱' 설정이 맞지 않나요?

여기 제 것이 있습니다.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"
    ]
  },
}

마지막에는 OP가 동작하는 코드를 가지고 있는 것 같습니다.target: 'static'그리고.ssr: true.
이는 권장되는(그리고 최신) 작업 방식이기 때문에 정당한 것으로 보입니다.Nuxt를 동형 유니버설 앱으로 설정하는 방법

언급URL : https://stackoverflow.com/questions/69012988/target-static-does-not-pre-render-in-nuxt

반응형