嘿，我刚好折腾过这个场景，你遇到的AMD Require问题本质是Monaco的模块加载机制和Electron的Node环境冲突导致的，结合vue-monaco和微软官方的Electron示例思路，我给你一套亲测有效的解决方案：

第一步：安装依赖 #

先把需要的包都装上，包括vue-monaco、核心的monaco-editor，还有webpack插件来处理Monaco的静态资源和worker：

npm install vue-monaco monaco-editor monaco-editor-webpack-plugin --save

第二步：配置Webpack（适配Electron） #

如果你用的是vue-cli-plugin-electron-builder（大部分Vue+Electron项目都会用这个），需要修改vue.config.js来让webpack正确处理Monaco的资源，同时解决AMD加载冲突：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  pluginOptions: {
    electronBuilder: {
      // 只在渲染进程配置Monaco，主进程不需要
      chainWebpackRendererProcess: config => {
        // 添加Monaco Webpack插件，按需加载你需要的语言
        config.plugin('monaco').use(MonacoWebpackPlugin, [
          {
            languages: ['javascript', 'json', 'html', 'css'] // 根据你的需求添加
          }
        ])
        
        // 处理Monaco的AMD模块加载问题
        config.module
          .rule('monaco-amd')
          .test(/\.js$/)
          .include.add(/node_modules\/monaco-editor/)
          .end()
          .use('amd-loader')
          .loader('amd-loader')
      }
    }
  }
}

第三步：在Vue组件中使用vue-monaco #

这里要注意Electron的资源路径问题，还要处理Monaco的worker加载路径，避免404：

<template>
  <div class="monaco-container">
    <MonacoEditor
      v-model="editorCode"
      language="javascript"
      :options="editorOpts"
      @mounted="onEditorMounted"
    />
  </div>
</template>

<script>
import MonacoEditor from 'vue-monaco'

export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      editorCode: `console.log('Hello Monaco in Electron! 🚀')`,
      editorOpts: {
        minimap: { enabled: false },
        fontSize: 14,
        lineNumbersMinChars: 3
      }
    }
  },
  methods: {
    onEditorMounted(editorInstance) {
      // 这里可以拿到编辑器实例，做自定义操作比如绑定事件、设置主题
      console.log('编辑器已挂载:', editorInstance)
    }
  },
  mounted() {
    // 针对Electron环境，配置Monaco的worker加载路径
    if (window.require) {
      const path = window.require('path')
      window.MonacoEnvironment = {
        getWorkerUrl: (moduleId, label) => {
          // 指向webpack打包后的worker文件路径
          return `file://${path.join(__dirname, 'static/monaco-workers', `${label}.worker.js`)}`
        }
      }
    }
  }
}
</script>

<style scoped>
.monaco-container {
  height: 600px;
}
/* 强制给编辑器设置高度，否则可能显示为空 */
:deep(.monaco-editor) {
  height: 100% !important;
}
</style>

关键坑点解决 #

• AMD Require冲突：Electron里Node的require和Monaco的AMDrequire会打架，我们通过webpack的amd-loader处理Monaco的模块，同时在组件里先判断环境再配置Monaco
• Worker加载404：必须通过MonacoEnvironment指定worker的本地路径，因为Electron的文件协议和浏览器不同，不能用相对路径直接加载
• 编辑器高度为空：一定要给容器和编辑器设置明确的高度，Monaco默认不会自动填充父容器

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