Monaco Editor运行报错：Uncaught ReferenceError: monaco is not defined求助

你遇到的问题根源在于loader.js是AMD模块加载器，它不会自动将monaco暴露到全局作用域，必须通过它的模块加载机制来引入monaco-editor。以下是修正方案：

关键改动说明 #

• 先配置加载器路径，指定vs目录的位置
• 通过require函数加载monaco-editor模块，在回调函数中执行编辑器创建逻辑
• 给html和body添加高度样式，确保编辑器容器能正常占满视图

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Monaco Editor Demo</title>
    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #container {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>

<script>
    // 配置加载器的模块路径
    require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });

    // 加载monaco-editor核心模块，加载完成后执行回调
    require(['vs/editor/editor.main'], function() {
        monaco.editor.create(document.getElementById('container'), {
            value: `function hello() {
    alert('Hello world!');
}`,
            language: 'javascript'
        });
    });
</script>
</body>
</html>

额外提示 #

• 确认本地服务器能正确访问node_modules/monaco-editor下的文件，路径不要出现拼写错误
• 如果使用Webpack、Vite等打包工具，可以直接安装monaco-editor包并通过ES模块引入，无需手动使用loader.js

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