Electron中使用Monaco-Editor遇到的一些问题

Electron中使用Monaco-Editor遇到的一些问题

前言

记录一下项目中使用Electron和Monaco-editor遇到的问题，那里有不对的地方，还请道友们指出，万分感谢~

一、引入monaco-editor问题？

一开始直接把web端的项目打包成Electron使用，运行时Monaco-editor加载不出来，会报错！报错内容Error: ENOENT: no such file or directory, open 'F:\code\irs-front\irs-front\https:\cdn.jsdelivr.net\npm\monaco-editor@0.43.0\min\vs\editor\editor.main.js'，查了很多资料了解到，默认情况下，Monaco-editor的资源是从CDN上面下载下来的，而我们现在转成了Electron，Electron内部限制了，所以请求不下来资源，所以Monaco-editor显示不出来。大概是这个意思哈。

1.离线引入Monaco-editor

官网给出了解决办法 传送

	npm i @monaco-editor/loader //安装此依赖(版本1.4.0)

在引入的Monaco-editor页面中

	import loader from "@monaco-editor/loader";
    const monacoInstance = require('monaco-editor/esm/vs/editor/editor.api');
    loader.config({monaco:monacoInstance,});
    loader.init().then(monaco=> { /* ...初始化Monaco对象操作 */ });

二、汉化问题

1.汉化的方法

1.1方法一：

步骤一：安装依赖(注意版本！！！)

npm install monaco-editor-esm-webpack-plugin@2.0.0 --save-dev
npm install monaco-editor@0.30.0 monaco-editor-webpack-plugin@6.0.0 monaco-editor-nls@2.0.0

步骤二：配置vue.config.js文件

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin'); //使用require,esm版本

module.exports = {
    module: {
        rules: [
            {
                test: /\.js/,
                enforce: 'pre',
                include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
                use: MonacoWebpackPlugin.loader
            }
        ]
    },
    plugins: [
        new MonacoWebpackPlugin()
    ]
};

步骤三：在Monaco-editor组件中编写

import { setLocaleData } from "monaco-editor-nls";
import zh_CN from "monaco-editor-nls/locale/zh-hans";
setLocaleData(zh_CN)

1.2 方法二

方法二就是目录一的引入问题解决办法，只不过在此基础上面添加属性即可(@monaco-editor/loader)

loader.config({ "vs/nls": { availableLanguages: { "*": "zh-cn" } } });

汉化时使用插件monaco-editor-nls汉化的话，不能使用import 引入Monaco对象，切记！！！要使用require引入
不要使用esm方式引入，webpack会提前打包，导致语言包设置失败，使用动态import

2.Electron中汉化

在Electron中使用汉化中的方法二，不管用。不知道是不是我那步操作错误了。最后我用的是汉化中的方法一解决在Electron中汉化问题。道友们可以试试哈

总结

有一些问题没有文档，确实很懵逼，自己的解决问题的能力以及遇到问题的数量还是不够多，加油肝吧！