使用vue-monaco配合Laravel Mix时Monaco editor worker创建报错如何解决

步骤1：安装依赖 #

安装monaco编辑器的webpack打包插件，用于自动提取worker文件：

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

步骤2：修改Laravel Mix配置 #

打开项目根目录下的webpack.mix.js文件，追加webpack插件配置：

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

mix
  // 你原本的mix配置（比如js、css编译规则保持不变）
  .webpackConfig({
    plugins: [
      new MonacoWebpackPlugin({
        // 按需指定需要支持的语言，不需要的可以删掉减小打包体积
        languages: ['javascript', 'typescript', 'html', 'css', 'json'],
        // 按需指定需要开启的编辑器功能
        features: ['coreCommands', 'find', 'format']
      })
    ]
  })

步骤3：配置全局Monaco worker路径 #

在你引入并初始化vue-monaco组件的代码之前，添加全局环境配置：

// 仅浏览器端执行，避免服务端渲染场景报错
if (typeof window !== 'undefined') {
  window.MonacoEnvironment = {
    getWorkerUrl (moduleId, label) {
      switch (label) {
        case 'json':
          return '/json.worker.js'
        case 'css':
        case 'scss':
        case 'less':
          return '/css.worker.js'
        case 'html':
          return '/html.worker.js'
        case 'typescript':
        case 'javascript':
          return '/ts.worker.js'
        default:
          return '/editor.worker.js'
      }
    }
  }
}

步骤4：重新编译项目 #

执行编译命令重新打包项目即可：

npm run dev
# 生产环境执行 npm run prod

如果站点部署在子路径下，需要将getWorkerUrl返回的路径前加上对应的子路径前缀即可。

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