Vuejs2 尝试获取窗口大小时，Nuxt无法在“节点”上执行“appendChild”

问题是项目必须转移到Nuxt，而一些代码无法工作。也就是说，屏幕的大小必须对文本执行操作。由于Nuxt是一个SSR，该代码无法在服务器端执行，因为它不知道窗口的大小

我能不能实现这个想法，让一切顺利？ 我有一个nuxt和i18n的项目

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

这是我的组件vue 此代码是导致错误的原因的示例

<template>
    <section>
        <div>           
            <h2 class="subtitle" v-html="filterHeadSlogan"></h2>            
        </div>
    </section>
</template>
<script>
  export default {
    name: 'testapp',
    data() {
      return {
        filterHeadSlogan: '',
        windowWidth: 0
      }
    },
    methods: {
      getWindowWidth(event) {
        this.windowWidth = document.documentElement.clientWidth
        var str = "<i>HELLO WORLD</i>"
        if (this.windowWidth >= 960) {
          this.filterHeadSlogan = str
        } else {
          this.filterHeadSlogan = str.replace(/<\/?[^>]+(>|$)/g, '')
        }
      }
    },
    mounted() {
      this.$nextTick(function () {
        window.addEventListener('resize', this.getWindowWidth);
        //Init
        this.getWindowWidth()
      })
    }

  }
</script>

---

发生错误，因为变量中没有数据。这个村庄出现了，但是没有数据，而且发生了冲突。我创建了异步数据

  async asyncData(){
        return {
          headSlogan: ""
        }
      },

完整代码

<template>
    <div class="westartslogan">
        <div class="head-slogan">
            <h2 v-html="headSlogan"></h2>
        </div>
        <h3>{{$t('page.home.wellcom_block_subtitle_left')}}</h3>
        <ul>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_1_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_2_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_3_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_4_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_5_left')"></div></li>
        </ul>

        <div class="startcalc-btn button-container">
            <nuxt-link   :to="getLocalizedRoute({ name: 'calculator' })"  class="uk-button uk-button-default">{{
                $t('page.home.wellcom_button_calculator') }}
            </nuxt-link >
        </div>
        <div class="ourproject-btn uk-hidden@s">
            <div class="button-container">
                <nuxt-link :to="getLocalizedRoute({ name: 'portfolio' })" class="uk-button uk-button-default">
                   {{ $t('page.home.wellcom_button_portfolio') }}
                </nuxt-link>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
      async asyncData(){
        return {
          headSlogan: ""
        }
      },
      name: 'we_can',
      data () {
        return {
          filterHeadSlogan: '',
          headSlogan:  this.$i18n.t('page.home.wellcom_block_title_left'),
          windowWidth: 0
        }
      },
     methods: {
       getWindowWidth (event) {
         this.windowWidth = document.documentElement.clientWidth
         if (this.windowWidth >= 960) {
           this.headSlogan = this.headSlogan
         } else {
           var str = this.headSlogan
           this.headSlogan = str.replace(/<\/?[^>]+(>|$)/g, '')
         }
       }
     },
    mounted() {
      this.$nextTick(function () {
        window.addEventListener('resize', this.getWindowWidth);
          //Init
          this.getWindowWidth()
      })
    }

  }
</script>

<style scoped>

</style>

---

我也在处理同样的问题

执行以下步骤：

开始运行您的项目。 用铬合金打开。 在Chrome开发工具中，清除应用程序选项卡中的站点数据。 硬加载页面。

---

当客户端与服务器上的数据不匹配时，会发生此错误。在开发模式下运行时，应该有更多的细节，例如控制台中的警告