1.bable 编译问题
Please add `@babel/plugin-transform-class-static-block` to your configuration.
解决方案
yarn add @babel/plugin-transform-class-static-block
在 babel.config.js 文件中
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: ['@babel/plugin-transform-class-static-block']
}
2. worker 问题
editorSimpleWorker.js?f794:501 Uncaught (in promise) Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?f794:501:1)
at eval (webWorker.js?96c9:38:1)
at async eval (tsMode.js?8483:84:1)
解决方案
yarn add monaco-editor-webpack-plugin
在 vue.config.js 中
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({
languages: ['json', 'css', 'html', 'typescript', 'javascript']
})
]
}
}
<template>
<div class="editor-container" ref="editorContainer"></div>
</template>
<script setup>
import * as monaco from 'monaco-editor'
import { onMounted, ref } from 'vue'
const editorContainer = ref(null)
onMounted(() => {
const editor = monaco.editor.create(editorContainer.value, {
value: 'console.log("Hello, Monaco!");',
language: 'javascript'
})
})
</script>
<style>
.editor-container {
height: 100%;
width: 100%;
}
</style>