Vue Electron项目中Monaco Editor仅渲染纯文本的问题求助

可能原因及对应解决方案 #

1. 初始化时机错误 #

如果在DOM元素未完成挂载时就调用monaco.editor.create，会导致编辑器初始化不完整，无法加载语言高亮模块。

解决办法：
在Vue组件的mounted（选项式API）或onMounted（组合式API）钩子中执行编辑器初始化代码，确保目标DOM已渲染：

// 选项式API示例
export default {
  mounted() {
    this.initMonaco()
  },
  methods: {
    initMonaco() {
      var editor = monaco.editor.create(document.getElementById('hello-world-test'), {
        value: 'var hello = "world"',
        language: 'javascript',
        minimap: { enabled: true }
      })
    }
  }
}

// 组合式API示例
import { onMounted } from 'vue'
onMounted(() => {
  var editor = monaco.editor.create(document.getElementById('hello-world-test'), {
    value: 'var hello = "world"',
    language: 'javascript',
    minimap: { enabled: true }
  })
})

2. 语言包未正确加载 #

Monaco Editor默认不会自动打包所有语言的语法高亮模块，在Vue Electron项目中，若未配置构建工具引入对应语言包，会导致编辑器无法识别language配置。

解决办法：
根据你的构建工具（Vue CLI/Vite）配置对应的Monaco插件：

• Vue CLI（Webpack）：

  1. 安装插件：npm install monaco-editor-webpack-plugin --save-dev
  2. 在vue.config.js中配置：

  const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
  module.exports = {
    configureWebpack: {
      plugins: [
        new MonacoWebpackPlugin({
          languages: ['javascript', 'html', 'css'] // 按需添加需要的语言
        })
      ]
    }
  }
  

• Vite：

  1. 安装插件：npm install vite-plugin-monaco-editor --save-dev
  2. 在vite.config.js中配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import monacoEditorPlugin from 'vite-plugin-monaco-editor'
  
  export default defineConfig({
    plugins: [
      vue(),
      monacoEditorPlugin({
        languages: ['javascript'] // 指定需要的语言
      })
    ]
  })
  

3. 容器元素样式异常 #

虽然你的容器设置了vh-100，但position-absolute end-0可能未指定宽度，导致编辑器布局异常，间接影响语法高亮渲染。

解决办法：
给容器元素补充宽度样式，比如添加w-100类或直接设置width: 100%：

<div id="hello-world-test" class="vh-100 w-100 text-start position-absolute end-0"></div>

同时确保容器没有被其他元素遮挡或设置了overflow: hidden导致编辑器内容无法正常渲染。

内容的提问来源于stack exchange，提问作者Caleb Prenger