React-Electron项目中Monaco Editor加载资源路径错误求助

问题原因 #

Electron环境的资源加载逻辑会误将CDN URL识别为本地路径，导致项目根路径与CDN地址错误拼接，触发文件找不到的报错。

解决方案 #

1. 显式指定CDN加载规则 #

通过loaderOptions强制编辑器使用正确的CDN路径，规避Electron的路径解析干扰：

import Editor from '@monaco-editor/react';

function CodeEditor() {
  return (
    <Editor
      height="500px"
      language="javascript"
      loaderOptions={{
        paths: {
          vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.36.1/min/vs'
        },
        absolutePath: false
      }}
    />
  );
}

export default CodeEditor;

2. 本地打包monaco-editor资源（Electron项目推荐） #

完全避免CDN依赖，将monaco-editor资源直接打包到应用中：

• 先安装依赖：

npm install monaco-editor

• 配置编辑器使用本地资源：

import Editor from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import path from 'path';

function CodeEditor() {
  return (
    <Editor
      height="500px"
      language="javascript"
      monaco={monaco}
      loaderOptions={{
        paths: {
          vs: path.join(__dirname, '../node_modules/monaco-editor/min/vs')
        }
      }}
    />
  );
}

export default CodeEditor;

• 补充：需确保Electron打包配置（如electron-builder）包含node_modules/monaco-editor/min/vs目录下的所有资源。

3. 调整Electron主进程配置（仅临时测试用） #

在Electron主进程的窗口配置中，修改webPreferences临时关闭路径解析限制：

const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    webSecurity: false,
    allowRunningInsecureContent: true
  }
});

注意：该方案会降低应用安全性，生产环境禁止使用。

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