Vite 2项目引入monaco-editor报Worker未导入错误的正确方法问询

报错场景说明 #

• 已完成 Vite 2 项目搭建，且已将 monaco-editor 安装为项目依赖
• 初始化编辑器时抛出Worker加载异常，错误堆栈为：

editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:454)
    at webWorker.js:38

• 曾按原有Rollup生态的方案，在Vite配置中引入 rollup-plugin-monaco-editor 插件解决问题，对应配置代码如下，配置生效后报错未消除：

export default defineConfig({
  plugins: [
    vue(),
    monaco({ languages: ['javascript'] }),
  ],
});

适配Vite 2的正确配置步骤 #

1. 移除无效插件配置 #

首先从Vite配置中删除 rollup-plugin-monaco-editor 的相关引入和配置项，该插件基于Rollup打包逻辑开发，与Vite 2内置的Worker处理机制适配性较差，无法解决当前报错。
调整后的Vite配置基础结构为：

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

export default defineConfig({
  plugins: [
    vue()
    // 此处不再放置monaco相关插件配置
  ],
})

2. 手动配置Worker导入规则 #

利用Vite内置的Worker导入语法，在项目中新建monaco初始化工具文件（如 src/utils/monaco.js），按需导入核心模块、语言支持和对应Worker，手动绑定Worker生成规则：

// 导入monaco核心模块
import * as monaco from 'monaco-editor';
// 按需导入不同类型的Worker，必须添加?worker后缀以适配Vite的Worker处理逻辑
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

// 全局配置monaco的Worker获取逻辑
self.MonacoEnvironment = {
  getWorker(_, label) {
    // 匹配对应语言的Worker类型
    if (label === 'javascript' || label === 'typescript') {
      return new tsWorker();
    }
    // 其余场景使用基础编辑器Worker
    return new editorWorker();
  }
};

export default monaco;

3. 业务代码中引入初始化后的monaco #

在需要使用编辑器的组件/页面中，直接引入上述初始化文件导出的monaco实例即可，无需重复配置Worker规则：

// 示例：在Vue组件中使用
import monaco from '@/utils/monaco'

// 初始化编辑器
monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("hello monaco")',
  language: 'javascript'
})

注意事项 #

• 所有Worker导入路径必须拼接 ?worker 后缀，否则Vite无法正确识别Worker文件类型，会触发导入报错
• 可以根据项目实际用到的语言，对应导入匹配的语言Worker，不需要全量引入所有语言包，以此降低打包体积
• 若需要使用JSON、CSS、HTML等语言支持，可按照相同逻辑，导入对应路径的worker模块，并在getWorker方法中增加对应的分支判断

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