반응형
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
반응형
'source' 카테고리의 다른 글
| 이름 지정 시 mapGetters의 Vuex 사용자 지정 이름이 참입니다. (0) | 2022.08.18 |
|---|---|
| Larabel 컨트롤러에 BLOB 이미지 저장 (0) | 2022.08.18 |
| 로컬 호스트에서 Tomcat Server에 필요한 여러 포트(8005, 8080, 8009)가 이미 사용 중입니다. (0) | 2022.08.18 |
| Vue 앱은 로컬 개발에서만 API 데이터를 올바르게 렌더링하고 프로덕션 빌드에서는 렌더링하지 않습니다(Vuex, Axios 및 구획 사용). (0) | 2022.08.18 |
| 로컬 전략을 사용하여 nuxtjs/auth를 구현하는 데 문제가 있습니다. (0) | 2022.08.17 |