How to fix error: Unexpected usage loading foreign module for monaco editor in vue-cli-3

Question

当我尝试在我的 vue-cli-3 项目中包含优化选项时，该项目在某些页面中使用了 monaco-editor，我在控制台中收到以下错误：

languageFeatures.js?ff36:85 Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:540)
    at eval (webWorker.js?af50:54)

这是我的 vue.config.js 文件：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");


module.exports = {
    transpileDependencies: ["vuex-persist", "vuex-persistedstate"],
    configureWebpack: {
        devtool: false,
        optimization: {
            splitChunks: {
                minSize: 10000, 
                maxSize: 250000, 
            },
            nodeEnv: "production",
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    extractComments: 'false',
                    parallel: true,
                }),
            ],
            removeEmptyChunks: true,
            removeAvailableModules: true,
            mergeDuplicateChunks: true
        },
        plugins: [
            new MonacoWebpackPlugin({
                languages: ['javascript', 'css', 'html', 'typescript', 'json'],
                features: ['!gotoSymbol'],
            }),
            new PurgecssPlugin({paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true})}),
        ],
    }
};

• 摩纳哥编辑器 - v0.20.0
• Monaco 编辑器 webpack 插件 - v1.9.0
• Vue/cli - v4.3.1

所以问题是，如何避免出现此错误？

Answer 1

应该定义摩纳哥环境的基础 URL，并且在尝试导入 editor.main.js 之前应该导入主要工作人员。在尝试加载编辑器之前，您可以通过执行以下代码来尝试解决您的问题。

(window as any).MonacoEnvironment = {
      getWorkerUrl: function (workerId, label) {
          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
              self.MonacoEnvironment = { baseUrl: '${window.location.origin}/' };
              importScripts('${window.location.origin}/vs/base/worker/workerMain.js');
          `)}`;
      }
};

同样重要的是要注意，您应该将 URL 更改为托管 vs 文件的位置。