记录 monaco-editor 在 Vue 3 中无法正常渲染、报容器未初始化等问题的原因与处理方法。

一、常见报错现象

  1. 编辑器区域为空白，无任何内容
  2. 控制台报错：
    • Cannot read properties of null (reading 'appendChild')
    • Unexpected usage
  3. 编辑器初始化代码执行时，容器 DOM 尚未挂载

二、问题原因

  • monaco.editor.create 调用过早（DOM 未渲染完成）
  • 容器 ref 获取到的是 null
  • 父级容器高度为 0，导致编辑器无法显示
  • Vite 等构建工具中 worker 文件路径问题导致初始化失败

三、解决方法

1. 确保在 onMounted 后初始化

<script setup>
import * as monaco from 'monaco-editor'
import { onMounted, ref } from 'vue'

const editorRef = ref(null)

onMounted(() => {
  if (editorRef.value) {
    monaco.editor.create(editorRef.value, {
      value: '// 初始化成功',
      language: 'javascript',
      theme: 'vs-dark',
      automaticLayout: true
    })
  }
})
</script>

<template>
  <div ref="editorRef" style="height:500px;width:100%;"></div>
</template>

2. 保证容器尺寸可用

.editor-container {
  height: 500px;
  width: 100%;
}

若父级容器高度未设定，编辑器将无法计算布局。

3. 异步渲染场景延迟初始化

有些场景（如 Tab 切换、对话框弹出）中容器初始不在 DOM 中，可用 nextTick 或延迟初始化：

import { nextTick } from 'vue'

nextTick(() => {
  // monaco 初始化逻辑
})

4. 检查 worker 文件路径（Vite 打包）

Vite 构建后，monaco 的 worker 文件可能无法正确加载，需要使用插件或自定义配置。

四、小结

核心在于初始化时容器必须存在且有尺寸，并且在 onMounted 或 nextTick 阶段再执行 monaco.editor.create。