Я много пользуюсь 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.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"
}
}
ОБНОВИТЬ
Я попытался перенаправить первую страницу после ее монтирования. Он показывает изображения ниже
и в консоли я получил



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


используйте 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>
ты нашел решение?