nuxt 生成：无法在“节点”上执行“appendChild”

Question

我用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>

这就是servicesvar

[
    {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.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"
  }
}

更新

我试图在安装后重定向第一页。它显示了下面的图像

在控制台中我得到了

Answer 1

如果您使用的 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>

Answer 2

使用no-ssr哪个部分抛出该异常。一般来说，如果你有v-if v-else块，它会抛出该异常。

就我而言，我有v-if v-elseTopNavbar 组件。TopNavbar 组件以默认布局加载。我把 TopNavbar 放在no-ssr这样的位置：

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