如何解决仅在使用自定义绑定时显示的错误？答案

【问题标题】：How does one troubleshoot errors only showing when using a custom binding?如何解决仅在使用自定义绑定时显示的错误？
【发布时间】：2021-11-20 06:22:16
【问题描述】：

TLDR； 在 Azure 中使用自定义域绑定时出现错误，但在使用默认 azurewebsites 绑定时没有。例如https://somewebsite.com会产生错误，而https://somewebsite.azurewebsites.net不会产生错误。

背景信息：

在我的应用程序中，我使用 Three.js 在我的登录页面上生成背景。我已将所有动画代码包含在一个名为 <Wave /> 的组件中，我将其包含在我的 index.vue 中。 <Wave /> 只有一个 div，我试图在其中添加一个渲染器——这在我的本地计算机上的生产和开发以及默认 azurewebsites 域绑定的生产中都可以完美运行。

但是，当从通过 CloudFlare 设置的自定义绑定访问相同的应用程序服务时，组件失败并且我收到错误消息 DOMException: Node.appendChild: Cannot add children to a Text（这次使用 Firefox）。然而，这只发生在访问自定义绑定时硬重新加载时，如果我访问应用程序内的其他链接并使用<Wave /> 组件返回到路由，那么它可以完美运行。

一般概念：

<template>
  <div ref="animationContainer"></div>
</template>

<script>
export default {
  data() {
    return {
      container: null,
    }
  },
  mounted() {
    this.init()
  },
    methods: {
    init() {
      this.container = this.$refs.animationContainer
      this.container.appendChild(someRenderer)
    },
}
</script>

在使用自定义域绑定的部署生产中仅会产生错误：

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (/_nuxt/0fdd5ad.js:2:41686)
    ...

我也尝试将<Wave /> 组件包装在<ClientOnly>-tags 中，但这不会以任何方式改变错误。

任何关于从哪里开始的指针将不胜感激。

【问题讨论】：

您的问题是生命周期问题，事实上您主要尝试访问 DOM 的 ID，这不是推荐的处理方式。更喜欢使用refs。这与子域无关。您的应用加载 IMO 的更多方式。
我似乎粘贴了我的旧代码（这个问题已经有一段时间了）。我目前正在使用 $refs 来获取容器，但是我仍然遇到同样的问题@kissu。

标签： javascript vue.js three.js azure-web-app-service nuxt.js

【解决方案1】：

您需要记住，您的代码首先在服务器上执行，如此生命周期所示：https://nuxtjs.org/docs/concepts/nuxt-lifecycle#nuxt-lifecycle

但我很确定appendChild 不是在服务器上工作的方法。由于您可能正在使用ssr: true，因此我建议您仅在客户端运行此特定代码，以下是实现此目的的方法：https://stackoverflow.com/a/67751550/8816585

【讨论】：

我忘了说，但是组件已经被包裹在 -tags 中了。这就是为什么我对这个问题如此困惑。
@MariusMikelsen 在<client-only> 中拥有该组件并不能解决您的代码可能仍然存在问题的问题。即使mounted() 仅在客户端上运行，如下所示：nuxtjs.org/docs/concepts/nuxt-lifecycle#client 你可能有问题，所以尝试使用process.client 看看会发生什么。
将process.client 直接添加到 v-if 给了我一个错误，但我尝试添加 v-if="isReady" 并在mounted() 挂钩中将其设置为true，以及false默认。但是，错误没有变化，并且仍然仅在其中一个绑定上。
还尝试了这样的变体：mounted() { if(this.process.client) { this.isReady = true; } } 错误没有任何变化
什么是this.isReady？ @MariusMikelsen

【解决方案2】：

问题源于网站的另一部分，但影响了动画的加载，使其看起来与它有关。我仍然不知道导致错误的原因，但幸运的是不再遇到此错误。

【讨论】：