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

最新推荐文章于 2024-05-23 14:39:25 发布
最新推荐文章于 2024-05-23 14:39:25 发布
阅读量4.5k 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43340606/article/details/128134614
版权

报错:

说明: 

当我通过以下方式导入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的自动补全, 变量高亮, 波浪线报错的功能就都出来了

看效果图:

 

 

stubborn丶lili
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
monaco editor自定义代码解析和代码高亮颜色配置
weixin_42777968的博客
11-21 1231
【代码】monaco editor自定义代码解析和代码高亮颜色配置。
vue-cli2使用monaco-editor + 报错处理
qq_37976966的博客
11-19 8003
一、安装依赖 cnpm install monaco-editor -S cnpm install monaco-editor-webpack-plugin -S 二、具体使用步骤 下载完依赖，首先需要在config/index.js文件下进行配置 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { plugins: [ new MonacoWebpackPl
vue2-monaco-editor
04-06
vue2-monaco-editor Vue2.0 + Monaco Editor 实现在 web 页面中编辑 C#代码,并包含代码提示功能 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints and fixes files yarn lint Customize configuration See . 参考资料
正确解决TypeError: xxx is not a function异常的有效解决方法
wbajsjhhhhh的博客
05-03 8073
正确解决TypeError: xxx is not a function异常的有效解决方法
教大家怎么看monaco-editor的官方文档
04-17 2725
点进去，略过Enumerations（枚举）、Classes（类）、Interfaces（接口）、Type aliases（类型别名）、Events（事件）、Variables（变量）拉到下面，找到Function（功能）部分，主要是看create()，这个方法会在创建编辑器的时候初始化部分功能，这些功能在options里配置。点开具体参数，会有它的枚举值。如果不知道这个参数具体是干什么的，可以点开源代码Defined定义链接去看，里面注释的参数用途还是比较清楚的。
vue2项目 monaco-editor 使用心得
valsedefleurs的博客
04-26 1901
现总结一下在vue2项目安装使用monaco-editor走过的一些弯路。
【Vue】整合monaco-editor编译报错 ERROR in ./node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js
水w的博客
05-01 511
整合monaco-editor编译报错 ERROR in ./node_modules/monaco-editor/esm/vs/language/typescript/tsMode.js
使用monaco-editor插件报错contextKeyService.js:340 Element already has context attribute: editorBoxStyle
小祥编程擅长前端
05-15 1385
使用monaco-editor插件报错contextKeyService.js:340 Element already has context attribute: editorBoxStyle
vue3 vite使用 monaco-editor 报错
qq_56456071的博客
08-25 1304
monaco-editor 报错_.loadForeignModule
vue项目中使用monaco-editor插件,控制台报错Uncaught (in promise) Error: Unexpected usage
FU_ZIYI的博客
08-10 3685
vue项目中使用monaco-editor插件，控制台报错Uncaught (in promise) Error: Unexpected usage
vue项目中使用vue-i18n报错的解决方法
12-09
然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到...
vue3.0 vue-quill-editor.rar
09-19
在实际开发中，可能会遇到Vue3.0与Vue-Quill-Editor的兼容性问题，例如生命周期钩子的变化、Prop类型检查的更新等。这时，需要查阅官方文档或社区资源，寻找相应的解决方案。对于Vue CLI 3，要确保项目的构建配置...
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html...
Vue项目中quill-editor带样式编辑器的使用方法
08-29
本文将详细讲解如何在Vue中使用vue-quill-editor组件，并着重介绍如何自定义图片和视频的插入方式。 首先，确保已经通过npm安装了vue-quill-editor库： ```bash npm install vue-quill-editor ``` 接着，在`main.js...
探秘 Monaco Editor Webpack Plugin：优化前端代码编辑体验的新选择
gitblog_00042的博客
04-17 504
探秘 Monaco Editor Webpack Plugin：优化前端代码编辑体验的新选择 项目地址:https://gitcode.com/microsoft/monaco-editor-webpack-plugin Monaco Editor 是由微软开发的一个强大的在线代码编辑器，常用于 Visual Studio Code 等知名工具中。而 Monaco Editor Webpack P...
vue中使用monaco-editor打包文件混乱的问题
weixin_34384915的博客
09-26 1133
之前讲述了怎么在vue项目中使用monaco-editor （https://www.cnblogs.com/XHappyness/p/9414177.html），使用是正常的，虽然 npm run build 打包后文件能够正常使用，但是文件结构很乱，而且很大。 1. 初步解决，使用monaco-editor-webpack-plugin（https://github.com/Microsof...
monaco-editor打包到npm上，引用时出现样式混乱
最新发布
gh313287387的博客
05-23 229
在组件vite.config.ts中：monaco-editor不打包，放入external。使用打包时将monaco-eidtor依赖排除在外，不进行打包。
vue3使用monaco-editor插件,报错Unexpected usage
叮当的猫猫的博客
07-12 1139
在使用monaco-editor插件的时候，运行时没有报错，打开页面报如上错误，可以关掉，但是页面变了 还会再出现，上网找了一圈报错，是因为插件引入时产生的问题。然后再重新刷新一下页面就可以啦。
Vue整合Monaco组件报错
Simon778的博客
04-16 379
2.打开项目babel.config.js文件，加入下面配置。vue整合monaco组件。
怎么 在vue3 中使用monaco-editor
08-28
在 Vue 3 和 Vite 中使用 Monaco Editor 可以按照以下步骤进行操作： 1. 安装 Monaco Editor 的 npm 包： ```bash npm install monaco-editor ``` 2. 在你的 Vue 组件中引入 Monaco Editor： ```vue <template> <div> <div ref="editorContainer" style="width: 800px; height: 600px;"></div> </div> </template> <script> import * as monaco from 'monaco-editor'; export default { mounted() { // 创建 Monaco Editor 实例 this.editor = monaco.editor.create(this.$refs.editorContainer, { value: 'Hello, Vue!', language: 'javascript', }); }, beforeUnmount() { // 销毁 Monaco Editor 实例 this.editor.dispose(); }, }; </script> <style> /* 可以根据需要设置样式 */ </style> ``` 3. 在你的 Vite 配置文件中，添加对 Monaco Editor 的引用： ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], resolve: { alias: { // 将 monaco-editor 模块指向真实的路径 'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api.js', }, }, }); ``` 这样，你就可以在 Vue 3 + Vite 中使用 Monaco Editor 了。记得根据需要调整引入的语言和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值