vue2 项目中配置monaco-editor

基于老版本的 vue-cli 项目为 vue2 配置 monaco-editor

高版本的 monaco-editor 默认使用 esm 进行分发，而 vue-cli 内置的 webpack 版本是4.x

所以可以使用 monaco-editor 为

• monaco-editor@0.30.1
• monaco-editor-webpack-plugin@6.0.0

安装依赖

npm i monaco-editor@0.30.1 -S
npm i monaco-editor-webpack-plugin@6.0.0 -D

配置

在 vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
	chainWebpack(config) {
		config.plugin('monaco').use(MonacoWebpackPlugin)

		config.module.rule('ttf')
			.test(/\.ttf$/)
			.use('file-loader')
			.loader('file-loader');
    }
}

注意

在二次封装 monaco-editor 的时候，注意不要使用 v-model，在数据的循环流转中会引起编辑器的光标乱跳现象