vue加webpack项目导入monaco-editor编辑器就报错,这是为什么?

问题描述

vue加webpack项目导入monaco-editor,控制台就报错

clipboard.png

问题出现的环境背景及自己尝试过哪些方法

网上找不到解决方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

import * as monaco from 'monaco-editor'
export default {
    data() {
        return {}
    },
    created() {
        this.initEditor()
    },
    methods: {
        initEditor() {
            monaco.editor.create(document.getElementById('container'), {
                value: 'console.log("Hello, world")',
                language: 'javascript'
            })
        }
    }
}

你期待的结果是什么?实际看到的错误信息又是什么?

导入不报错,编辑器能正常使用。

阅读 10.3k
1 个回答

可能你已经找到答案了
可能我的答案因为环境问题你用了也不行
不过我还是说下

我是在electron-vue 里使用的,monaco-editor是0.18.1
也遇到类似的问题,网上的答案都不行,但最终还是找到了一个答案

先装插件monaco-editor-webpack-plugin

修改webpack.base.conf.js配置文件,这些和网上的答案一样
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
...
plugins: [

...
new MonacoWebpackPlugin()

]
};

区别在引入的时候
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'

这样就可以了
你可以试试,如果你现在还有兴趣

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题