错误环境

使用monaco-editor插件报错不能正常打开编辑界面

环境

• vite
• vue2
• "monaco-editor": "0.28.1"
• "vite-plugin-monaco-editor": "1.0.10"

原因

async hangeVisible() {
	const { monaco } = await import('./customMonaco');
	if (!this.editor) {
	  this.editor = monaco.editor.create(this.$refs.monacoDom, {
		theme: this.curTheme,
		automaticLayout: true,
		language: this.language
	  });
	}
       ···
}

在使用monaco.editor.create方法是没有拿到dom节点，也就是this.$refs.monacoDom这段代码无效。

解决办法

1. 检查dom元素上绑定的 ref 的拼写是否与函数中的一致。
2. 注意你使用的是 vue2 还是 vue3 ，vue2使用this.$refs.xxx拿到dom元素，vue3需要先声明一个变量并 return 出去，还要在 dom 元素上以该变量名绑定 ref。
3. 使用vue3还需注意拿 dom 节点的时机，因为 vue3 会先执行一遍 setup 函数，此时还没有 dom 所以需要使用 nextTick 。