如何在Vite+Vue3项目中官方集成Monaco Editor？求助配置vite.config.ts

步骤1：安装依赖 #

首先安装monaco-editor核心包：

npm install monaco-editor
# 或使用pnpm/yarn
pnpm add monaco-editor

步骤2：修改vite.config.ts #

添加Monaco worker的优化配置，解决开发和打包阶段的资源加载问题：

import { defineConfig } from 'vite'
// 若使用Vue/React框架，导入对应插件，比如：
// import vue from '@vitejs/plugin-vue'

export default defineConfig({
  // plugins: [vue()], // 根据你的项目框架添加
  optimizeDeps: {
    // 预编译Monaco的各语言worker文件
    include: [
      'monaco-editor/esm/vs/language/json/json.worker',
      'monaco-editor/esm/vs/language/css/css.worker',
      'monaco-editor/esm/vs/language/html/html.worker',
      'monaco-editor/esm/vs/language/typescript/ts.worker',
      'monaco-editor/esm/vs/editor/editor.worker'
    ]
  },
  build: {
    rollupOptions: {
      output: {
        // 将不同worker拆分为独立chunk，减小主包体积
        manualChunks: {
          jsonWorker: ['monaco-editor/esm/vs/language/json/json.worker'],
          cssWorker: ['monaco-editor/esm/vs/language/css/css.worker'],
          htmlWorker: ['monaco-editor/esm/vs/language/html/html.worker'],
          tsWorker: ['monaco-editor/esm/vs/language/typescript/ts.worker'],
          editorWorker: ['monaco-editor/esm/vs/editor/editor.worker']
        }
      }
    }
  }
})

步骤3：在代码中初始化编辑器 #

以纯TS项目为例，在页面中创建编辑器实例：

import * as monaco from 'monaco-editor'

// 配置Monaco的Worker加载路径
self.MonacoEnvironment = {
  getWorker(_: string, label: string) {
    switch (label) {
      case 'json':
        return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url))
      case 'css':
      case 'scss':
      case 'less':
        return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url))
      case 'html':
      case 'handlebars':
        return new Worker(new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url))
      case 'typescript':
      case 'javascript':
        return new Worker(new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url))
      default:
        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))
    }
  }
}

// 确保页面存在带ID的容器，且已设置高度（比如height: 600px）
const container = document.getElementById('monaco-container')
if (container) {
  const editor = monaco.editor.create(container, {
    value: 'console.log("Hello, Monaco Editor!");',
    language: 'javascript',
    theme: 'vs-dark' // 可选主题：vs/vs-dark/hc-black
  })

  // 可选：监听编辑器内容变化
  editor.onDidChangeModelContent(() => {
    console.log(editor.getValue())
  })

  // 页面销毁时销毁编辑器，避免内存泄漏
  window.addEventListener('beforeunload', () => {
    editor.dispose()
  })
}

关键注意事项 #

• 编辑器容器必须设置固定高度，否则无法正常渲染
• 若使用Vue/React组件，需在组件挂载完成后（如Vue的onMounted、React的useEffect）初始化编辑器，卸载时调用editor.dispose()
• 若仅使用特定语言（如仅JavaScript），可只配置对应语言的worker，减少打包体积

内容的提问来源于stack exchange，提问作者dongbo