Vue.js 为什么在尝试向body元素添加自定义类时，Nuxt JS中会出现SSR编码错误？_Vue.js_Vuejs2_Nuxt.js

Vue.js 为什么在尝试向body元素添加自定义类时，Nuxt JS中会出现SSR编码错误？

vue.js vuejs2

Vue.js 为什么在尝试向body元素添加自定义类时，Nuxt JS中会出现SSR编码错误？,vue.js,vuejs2,nuxt.js,Vue.js,Vuejs2,Nuxt.js,我在一个Nuxt项目中遇到了一个SSR编码错误，实际上我试图实现的是为特定页面的body元素添加一个自定义类下面是实现的代码块： export default { components: { PortfolioHeader, Footer }, head: { bodyAttrs: { class: 'portfolio' }, script: [ { sr

我在一个Nuxt项目中遇到了一个SSR编码错误，实际上我试图实现的是为特定页面的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="%7B%22class%22:%7B%22ssr%22:%22%22%7D%7D" cz-shortcut-listen="true">

如果您已经遇到此问题，或者您知道此错误的原因，请帮助我。

控制台中有任何错误，并且您在nuxt.config.js head属性中有任何内容吗？这段代码对我来说是正确的，问题可能在别处。@NickDawes控制台中没有错误。我已经在主描述中添加了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";
      }
    }
  }
};