一般情况下我们需要安装两个依赖:
【资料图】
npm install monaco-editor -Snpm install monaco-editor-webpack-plugin -D
monaco-editor：是网页编辑器的核心包，整体非常大，因为支持了很多的语言与很多的扩展功能。
monaco-editor-webpack-plugin：因为monaco-editor直接单独引入的情况下所支持的基本使用不能满足我们的需求，我们还需要支持智能提示等功能，所以需要额外单独做一些配置操作，虽然官网文档说明已经很清晰，但是配置起来还是不免比较繁琐，因此提供了这个webpack插件来帮助我们自动处理这些事情，简化我们的操作。
在vue项目中使用:
mounted (){//编辑器实例化mounted (){//编辑器实mounted (){//编辑器实例化this.monacoInstance = monaco.editor.create(this.$refs.monaco,{...this.options})// console.log(this.monacoInstance.getActions())this.model = this.monacoInstance.getModel()// console.log(this.model)}
data(){return {options:{// Monaco Editor Options// automaticLayout: true,// folding: true,value: this.value,//编辑器内容language:"plaintext",theme:"myCustomTheme",//主题lineNumbers:"on",//行号wordWrap:"off",//自动换行readOnly: false,//是否只读minimap:{ //缩略图enabled: false},"semanticHighlighting.enabled": true //高亮},}}
有兴趣可以去官网查看api文档的具体事例，这里我就不举例了。
下面展示几个加入依赖后可能出现的问题:
1.运行应用程序时，它显示 Cannot find module "monaco-editor"
2.运行时报错
解决方式:
第一步:出现这些情况首先要确认你的两个依赖的版本是否一致。
第二步:vue.config.js中进行配置
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin")module.exports ={chainWebpack (config){config.plugin("monaco").use(new MonacoWebpackPlugin())}
此时就可以试一下是否能运行，不行的话试一试引入时改为:
import * as monaco from "monaco-editor/esm/vs/editor/editor.api"
关键词：
