monaco-editor 报错“Error: Unexpected usage”问题描述本地环境调试没有问题，但发布

问题描述本地环境调试没有问题，但发布至发布环境会报错 Error: Unexpected usage 和 Refused to create a worker from xxx, because it violates the following Content Security Policy directive "worker-src blob"

原因分析 Worker(编辑器启用) 线程无法读取本地文件，即不能打开本机的文件系统（file:// ），它所加载的脚本，必须来自网络（本地环境调用的是本地服务链接到的文件）。而在发布环境一直尝试读取本地环境文件导致报错
*知识点：Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程，详细Web Worker
解决方案

window.MonacoEnvironment = {
  getWorkerUrl: (moduleId, label) => {
    return label === 'json' ? this.setWorkerUrl('json') : this.setWorkerUrl('editor') // label 可以为 javascript、css、html等，这里仅举例
  },
}
this.monacoEditor = monaco.editor.create(this.$refs.container, this.monacoOptions)

// method setWorkerUrl
setWorkerUrl(key) {
  const { NODE_ENV, BASE_URL } = process.env
  return NODE_ENV === 'development'
    ? `./${key}.worker.js` // 本地环境读取本地服务 worker 文件
    : `data:text/javascript;charset=utf-8,${encodeURIComponent(`
      importScripts('https:${BASE_URL}${key}.worker.js');`)}` // 发布环境通过 importScripts() 函数将外部脚本文件或库加载到 Worker 中
},

github