支持nuxt.js 服务端渲染吗？

[BG7ZAG]

里面应该用了Window 对象，然后就是报错 未定义

[ZYSzys]

嗯，是用到了window对象。目前还不支持服务端渲染，之后会研究下这方面，看能不能支持上。

不过我觉得这种背景动画应该没必要上服务端渲染吧😅。

[BG7ZAG]

用了nuxt.js 所以来问下看看支不支持☺

[sinsong]

怪不得nuxt.js里头炸了。。。

[sinsong]

这是个不错的选择
https://zh.nuxtjs.org/api/components-no-ssr/

用这个手法让代码在浏览器执行看看行不行（我不太会，不好意思）
https://zh.nuxtjs.org/faq/window-document-undefined/

我这么整的:

1. plugin 插件 plugins\nest.js

import Vue from 'vue'
import vueCanvasNest from 'vue-canvas-nest'

Vue.component('vue-canvas-nest', vueCanvasNest)

2. 配置 nuxt.config.js

plugins: [
    {src: '~/plugins/nest.js', mode: 'client'}
  ]

3. 直接使用

<vue-canvas-nest></vue-canvas-nest>

问题是会有报错

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. vue.runtime.esm.js:619
    VueJS 67
    NuxtJS 2
    tryCatch runtime.js:45
    invoke runtime.js:271
    method runtime.js:97
    tryCatch runtime.js:45
    invoke runtime.js:135
    invoke runtime.js:145

4. 使用时放到 client-only 里头(以前叫no-ssr)

<client-only>
    <vue-canvas-nest></vue-canvas-nest>
</client-only>

[xiaoye-2018]

这是个不错的选择
https://zh.nuxtjs.org/api/components-no-ssr/

用这个手法让代码在浏览器执行看看行不行（我不太会，不好意思）
https://zh.nuxtjs.org/faq/window-document-undefined/

我这么整的:

1. plugin 插件 plugins\nest.js

import Vue from 'vue'
import vueCanvasNest from 'vue-canvas-nest'

Vue.component('vue-canvas-nest', vueCanvasNest)

1. 配置 nuxt.config.js

plugins: [
    {src: '~/plugins/nest.js', mode: 'client'}
  ]

1. 直接使用

<vue-canvas-nest></vue-canvas-nest>

问题是会有报错

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. vue.runtime.esm.js:619
    VueJS 67
    NuxtJS 2
    tryCatch runtime.js:45
    invoke runtime.js:271
    method runtime.js:97
    tryCatch runtime.js:45
    invoke runtime.js:135
    invoke runtime.js:145

1. 使用时放到 client-only 里头(以前叫no-ssr)

<client-only>
    <vue-canvas-nest></vue-canvas-nest>
</client-only>

我刚刚测试了，发现只有页面下半部分有图案出现，而且图案跟鼠标的位置有偏差