반응형
본문 요소에 커스텀클래스를 추가하려고 하면 Nuxt JS에서 SSR 인코딩 오류가 발생하는 이유는 무엇입니까?
Nuxt 프로젝트에서 SSR 인코딩 오류가 발생했습니다. 기본적으로 특정 페이지의 본문 요소에 커스텀 클래스를 추가하려고 합니다.
구현된 코드 청크는 다음과 같습니다.
export default {
components: {
PortfolioHeader,
Footer
},
head: {
bodyAttrs: {
class: 'portfolio'
},
script: [
{
src: 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'
}
]
},
data() {
return {
apiURL: this.$config.apiUrl,
currentPortfolio: this.$store.state.portfolios.filter( portfolio => portfolio.title.toLowerCase() === 'busvel' )[0]
}
}
}
DOM 생성 코드로 얻을 수 있는 것은 다음과 같습니다.
<body class="" data-n-head="%7B%22class%22:%7B%22ssr%22:%22%22%7D%7D" cz-shortcut-listen="true">
nuxt.config.js 입니다.
export default {
mode: "universal",
target: "server",
dev: process.env.APP_ENV !== "production",
vue: {
config: {
productionTip: true,
devtools: true
}
},
server: {
host: "0.0.0.0"
},
publicRuntimeConfig: {
baseUrl: process.env.BASE_URL || "http://localhost:3000",
apiUrl: process.env.API_URL || "http://localhost:1337"
},
head: {
title: process.env.npm_package_name || "",
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content:
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
},
{
hid: "description",
name: "description",
content: process.env.npm_package_description || ""
}
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;800;900&display=swap" }
]
},
css: ["slick-carousel/slick/slick.css"],
plugins: [
"@/plugins/vue-typed.js",
{ src: "~/plugins/vue-typed.js", mode: "server" },
{ src: "~/plugins/vue-slick.js", mode: "client" },
{ src: "~/plugins/vue-parallax.js", mode: "client" }
],
components: true,
buildModules: ["nuxt-gsap"],
modules: [
// Doc: https://bootstrap-vue.js.org
"bootstrap-vue/nuxt",
"@nuxtjs/axios",
"@nuxtjs/style-resources",
"@nuxtjs/proxy"
],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
styleResources: {
scss: ["~assets/scss/_colors.scss", "~assets/scss/_bootstrap.scss"]
},
build: {
devtools: true,
html: {
minify: {
minifyCSS: process.env.APP_ENV === "production" ? true : false,
minifyJS: process.env.APP_ENV === "production" ? true : false
}
},
optimization: {
minimize: process.env.APP_ENV === "production" ? true : false
},
postcss: {
sourceMap: true
},
loaders: {
css: {
sourceMap: true
},
scss: {
sourceMap: true,
sassOptions: {
outputStyle: "compressed"
}
}
},
extend(config, ctx) {
if (ctx.isClient) {
config.devtool = "#source-map";
}
}
}
};
이미 이 문제에 직면해 있거나 이 버그의 원인을 알고 있다면 도와주세요.
언급URL : https://stackoverflow.com/questions/64785112/why-do-i-get-an-ssr-encoding-error-in-nuxt-js-when-trying-to-add-a-custom-class
반응형
'programing' 카테고리의 다른 글
| Python 프로젝트용 .gitignore 파일을 추가하기 위한 베스트 프랙티스? (0) | 2022.12.07 |
|---|---|
| mysql을 사용하여 쿼리 결과를 변수에 저장하는 방법 (0) | 2022.12.07 |
| Java를 사용하여 디렉토리의 모든 파일을 재귀적으로 나열 (0) | 2022.12.07 |
| 문자열이 목록의 문자열 중 하나로 끝나는지 확인합니다. (0) | 2022.12.07 |
| MariaDB/Mediawiki의 다중 행 정규식 일치 (0) | 2022.12.07 |