vue3打包出来切换菜单时报错 Cannot read properties of null (reading 'insertBefore')

这个错误一般是由于在切换菜单时，渲染的组件中使用了`ref`，但是在切换时该组件并未被渲染，导致`ref`获取到的是`null`，从而无法执行`insertBefore`方法。

你可以尝试在组件中加上`v-if`，在组件渲染时才使用`ref`，如下所示：

<template>
  <div v-if="show">
    <!-- 组件代码 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    switchMenu() {
      this.show = false // 隐藏当前组件
      // 切换菜单代码
      this.show = true // 显示新组件
    }
  }
}
</script>

这样在切换菜单时，会先隐藏当前组件，等到新组件渲染完毕后再显示。这样就可以避免`ref`获取到`null`的问题。

相关问题

vue i18n 切换语言报错 TypeError: Cannot read properties of null (reading 'insertBefore')

根据提供的引用内容，这个错误可能是由于在切换语言时，i18n插件无法正确地找到DOM元素并插入新的文本节点。这可能是由于DOM元素不存在或未正确加载导致的。为了解决这个问题，可以尝试以下几种方法：

1. 确保DOM元素存在并正确加载。可以使用Vue.js的生命周期钩子函数来确保DOM元素已经加载完毕，然后再执行i18n插件的切换语言操作。

2. 确保i18n插件已正确安装并配置。可以检查i18n插件的配置文件是否正确，并确保在Vue.js实例中正确地注册了i18n插件。

3. 确保语言包文件存在并正确加载。可以检查语言包文件是否正确地加载，并确保语言包文件中包含了正确的文本节点。

下面是一个可能的解决方案：

<template>
  <div>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
    <p>{{ $t('hello') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    switchLanguage(lang) {
      this.$i18n.locale = lang;
    }
  }
}
</script>

vue3抱错TypeError: Cannot read properties of null (reading 'insertBefore')

根据提供的引用内容，出现"TypeError: Cannot read properties of null (reading 'insertBefore')"错误的原因可能是在Vue3中父组件的el-form中放置了子组件，并且子组件直接使用了el-form-item。这在Edge浏览器中会报错，而在谷歌浏览器中不会报错。

解决这个问题的方法是将el-form-item切换为div，并将相应的类名复制过来。

另外，还有一种可能的原因是在cloumn中使用了一个方法，但没有对数据进行非空判断，导致出现了该错误。

以下是两种可能的解决办法：
1. 将el-form-item切换为div，并复制相应的类名：

<template>
  <el-form>
    <div class="el-form-item">
      <!-- 子组件内容 -->
    </div>
  </el-form>
</template>

2. 在使用方法之前进行非空判断：

// 在cloumn中使用方法之前进行非空判断
if (data !== null) {
  // 使用方法
}