Vue 3 中 monaco-editor 配置

记录在 Vue 3 项目中使用 monaco-editor 的安装、基本配置与常见问题。

---

一、安装依赖

npm install monaco-editor

如需类型支持：

npm install --save-dev @types/monaco-editor

---

二、基本使用

创建组件 MonacoEditor.vue：

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

const editorRef = ref(null)
let editorInstance = null

onMounted(() => {
  editorInstance = monaco.editor.create(editorRef.value, {
    value: '// Hello Monaco',
    language: 'javascript',
    theme: 'vs-dark',
    automaticLayout: true
  })
})
</script>

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

---

三、样式导入

在 main.js 或组件中引入样式：

import 'monaco-editor/min/vs/editor/editor.main.css'

---

四、配置语言与主题

monaco.editor.setTheme('vs-dark')
monaco.editor.create(editorRef.value, {
  value: 'SELECT * FROM table',
  language: 'sql'
})

可用语言包括：javascript、typescript、json、css、html、sql 等。

---

五、事件监听

editorInstance.onDidChangeModelContent(() => {
  console.log(editorInstance.getValue())
})

---

六、在 Vite 项目中的静态资源问题

monaco-editor 会动态加载 worker 文件，在 Vite 下需要额外配置：

vite.config.js 示例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['monaco-editor']
  }
})

对于复杂 worker 路径问题，可使用 vite-plugin-monaco-editor 简化。

---

七、小结

• automaticLayout: true 可自适应容器变化
• 主题和语言可按需切换
• 需要注意 worker 文件加载路径问题，尤其是在打包后