解决在vue项目中使用monaco-editor的报错问题

1. 先清除monaco-editor所有相关的东西, 这个包的体积太大了, 也不需要配置monaco-editor-webpack-plugin。4. 简单的配置相应的参数, 那么monaco-editor的自动补全, 变量高亮, 波浪线报错的功能就都出来了。2. 复制monaco-editor包中的min文件夹,作为静态文件放在public文件中。当我通过以下方式导入monaco插件时, 就会

stubborn丶lili

5128人浏览 · 2022-12-01 17:09:46

stubborn丶lili · 2022-12-01 17:09:46 发布

报错:

说明:

当我通过以下方式导入monaco插件时, 就会报错, 所以我更换了一种方式导入

import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'

解决:

1. 先清除monaco-editor所有相关的东西, 这个包的体积太大了, 也不需要配置monaco-editor-webpack-plugin

2. 复制monaco-editor包中的min文件夹, 作为静态文件放在public文件中

3. 在public/index.html导入相应的文件

4. 简单的配置相应的参数, 那么monaco-editor的自动补全, 变量高亮, 波浪线报错的功能就都出来了

看效果图:

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^