Блог

Главная - Вопросы по программированию - Почему я получаю ошибку кодирования SSR в Nuxt JS при попытке добавить пользовательский класс к элементу body?

Почему я получаю ошибку кодирования SSR в Nuxt JS при попытке добавить пользовательский класс к элементу body?

#vue.js #vuejs2 #nuxt.js

#vue.js #vuejs2 #nuxt.js

Вопрос:

Я столкнулся с ошибкой кодирования SSR в проекте Nuxt, по сути, то, чего я пытаюсь достичь, — это добавление пользовательского класса к элементу body для определенной страницы.

Вот реализованный фрагмент кода:

 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="{"class":{"ssr":""}}" 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;900amp;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";
      }
    }
  }
};

Пожалуйста, помогите мне, если вы уже сталкивались с этой проблемой или знаете причину этой ошибки.

Комментарии:

1. Какие-либо ошибки в консоли, и есть ли у вас что-нибудь в nuxt.config.js главная собственность? Этот код выглядит правильным для меня, проблема, вероятно, в другом месте.

2. @NickDawes У меня нет ошибок в консоли. Я добавил nuxt.config.js содержимое файла соответствует основному описанию.