Nuxt generate: не удалось выполнить appendChild на узле

Я много пользуюсь nuxt. Это очень мощный фреймворк, но в последнее время я не могу заставить его работать (даже после 3 месяцев создания статических веб-страниц). Проблема, которую я получаю, возникает только тогда, когда я создаю сайт (с помощью команды nuxt generate). Это ошибка, которую я получаю от браузера. (Все отлично работает со средой горячей перезагрузки)

[nuxt] Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': 
This node type does not support this method.

Шаблон vue выглядит следующим образом

<v-container grid-list-md class = "mt50 mb50" id = "services">
  <h1 class = "text-center">
    {{$t('index.services')}}
  </h1>
  <v-layout row wrap>
    <v-flex xs12 lg3 sm6 md4 :key = "k" v-for = "(service, k) in services">
      <v-card height = "40">
        <v-card-title> 
          <v-icon>{{service.icon}}</v-icon> {{$t(service.name)}}
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

и это services var

[
    {name: 'common.mixing', icon: 'insert_chart', id: 'mixing'},
    {name: 'common.mastering', icon: 'disc_full', id: 'mastering'},
    {name: 'common.promotion', icon: 'radio', id: 'promotion'},
    {name: 'common.photograph', icon: 'photo', id: 'photograph'},
    {name: 'common.rehearsal', icon: 'tune', id: 'rehearsal'},
    {name: 'common.graphics', icon: 'perm_media', id: 'graphics'},
    {name: 'common.website', icon: 'web', id: 'website'},
    {name: 'common.videoclip', icon: 'videocam', id: 'videoclip'}
  ]

Я знаю, что эта часть ломает все из-за изображения ниже, это результат, который я получаю (это также нарушает все логические javascripts приложения). Это изображение показывает нижнюю часть раздела приложения <nuxt />.

Nuxt generate: не удалось выполнить appendChild на узле

Я знаю, что есть некоторые открытые проблемы здесьздесьздесьздесьздесьздесьздесь и здесь. Пробовал все, что было сказано в этих ссылках, но ничего не помогло мне решить проблему. Проблема все еще сохраняется.

Вот мой nuxt.config.js (или его часть)

const nodeExternals = require ('webpack-node-externals') const axios = require ('axios')

module.exports = {
  head: {
    title: 'Website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: "" }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/css/fonts.css' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
    ]
  },
  modules: ['nuxtjs-dotenv-module'],
  plugins: [
    '~/plugins/vuetify.js',
    { src: '~/plugins/vuetify-google-autocomplete.js', ssr: false },
    { src: '~/plugins/vue-masonry.js', ssr: false },
    { src: '~/plugins/stripe.js', ssr: false, injectAs: 'socialAuth' },
    { src: '~/plugins/ga.js', ssr: false },
    { src: '~/plugins/google.js', ssr: false, injectAs: 'googleAuth' },
    '~/plugins/global.js',
    '~/plugins/i18n.js'
  ],
  css: [
    '~/assets/style/app.styl'
  ],
  router: {middleware : 'i18n'},
  loading: { color: 'orange' },
  generate: {
    gzip: true,
    minify: {
      collapseWhitespace: true
    },
    interval: 1,
    routes: function () {
      [...]
      let rooms = axios.get(domain + '/nuxt/rooms').then((res) => {
        if (res && res.data.length){
          return res.data.map((room) => {
            return '/manage/pro/room/' + room._id
          })
        }else{
          return []
        }
      }).catch(response => {
      });
      let bookings = axios.get(domain + '/nuxt/users').then((res) => {
        if (res && res.data.length){
          return res.data.map((user) => {
            return '/bookings/' + user.slug
          })
        }else {
          return []
        }
      }).catch(response => {
      });
      let user = axios.get(domain + '/nuxt/users').then((res) => {
        if (res && res.data.length){
          return res.data.map((user) => {
            return '/user/' + user._id + '/' + user.username
          })
        }else {
          return []
        }
      }).catch(response => {
      });
      let posts = axios.get(domain + '/nuxt/posts').then((res) => {
        if (res && res.data.length){
          return res.data.map((post) => {
            return '/post/' + post._id
          })
        }else {
          return []
        }
      }).catch(response => {
      });
      return Promise.all([rooms, posts, user, bookings]).then(values => {
        return values.join().split(',');
      })
    }
  },
  build: {
    vendor: [
      'vue-i18n',
      'v-img',
      'axios',
      'vue-masonry-css',
      'vue-awesome',
      'vuetify-google-autocomplete',
      'nuxt-dropzone',
      'v-infinite-scroll',
      'vue-icons'
    ],
    extend (config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [
              /^vue-awesome/,
              /^vue-masonry-css/,
              /^vuetify-google-autocomplete/,
              /^v-infinite-scroll/,
              /^vue-icons/
            ]
          })
        ]
      }
    }
  },
  env: {
    NUXT_ENV: process.env.NUXT_ENV
  }
}

и мой package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "author": "Dario",
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=dev CUSTOM_ENV=dev NUXT_ENV=dev nuxt",
    "local": "NODE_ENV=local CUSTOM_ENV=local NUXT_ENV=local nuxt",
    "build": "NODE_ENV=local CUSTOM_ENV=local NUXT_ENV=local nuxt build",
    "start": "NODE_ENV=local CUSTOM_ENV=local NUXT_ENV=local nuxt start",
    "generate": "NUXT_ENV=prod nuxt generate",
    "generate-dev": "NUXT_ENV=dev nuxt generate"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "babel-runtime": "^6.26.0",
    "body-parser": "^1.18.3",
    "bulma": "^0.5.1",
    "callback-loader": "^0.2.4",
    "dotenv": "^5.0.1",
    "express": "^4.16.3",
    "express-session": "^1.15.3",
    "form-data": "^2.3.2",
    "fs": "0.0.1-security",
    "link-prevue": "^1.1.3",
    "nuxt": "^1.4.1",
    "nuxt-dropzone": "^0.2.7",
    "nuxtjs-dotenv-module": "^1.0.0",
    "regenerator-runtime": "^0.12.0",
    "v-img": "^0.2.0",
    "v-infinite-scroll": "^1.0.4",
    "vue": "^2.5.16",
    "vue-authenticate-clone": "^1.3.7",
    "vue-awesome": "^2.3.8",
    "vue-axios": "^2.1.2",
    "vue-google-authentication": "*",
    "vue-i18n": "^7.8.1",
    "vue-icons": "^2.0.0",
    "vue-infinite-scroll": "^2.0.2",
    "vue-masonry-css": "^1.0.2",
    "vue-passport": "^1.0.13",
    "vue-server-renderer": "2.5.16",
    "vue-stripe-checkout": "^1.0.8",
    "vue-template-compiler": "2.5.16",
    "vuelidate": "^0.6.2",
    "vuetify": "^1.1.8",
    "vuetify-cloudinary-upload": "^0.1.1",
    "vuetify-google-autocomplete": "^2.0.0-beta.4",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^3.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"
  }
}

ОБНОВИТЬ

Я попытался перенаправить первую страницу после ее монтирования. Он показывает изображения ниже

Nuxt generate: не удалось выполнить appendChild на узле

и в консоли я получил

Nuxt generate: не удалось выполнить appendChild на узле

ты нашел решение?

soha1410 24.08.2019 09:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
6
1
2 653
2

Ответы 2

используйте no-ssr, часть которого вызывает это исключение. как правило, если у вас есть блок v-ifv-else, он выдает это исключение.

В моем случае у меня есть v-ifv-else в компоненте TopNavbar. Компонент TopNavbar загружается в макете по умолчанию. Я поместил TopNavbar в no-ssr, например:

<no-ssr> 
 <TopNavbar/> 
</no-ssr>

Если вы используете версию Nuxt <v2.9.0, используйте <no-ssr>. В противном случае оберните компоненты или страницы с помощью <client-only></client-only>. Это решит проблему.

<template>
   <div>
      <client-only>
         <h1>This is a nuxt page</h1>
      </client-only>
   </div>
</template>

Другие вопросы по теме