vue如何使用monaco?editor漢化右鍵菜單

本篇內容介紹了“vue如何使用monaco editor漢化右鍵菜單”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

安裝依賴插件

首先使用npm或者其他包管理工具安裝依賴插件：

npm install monaco-editor --save
npm install monaco-editor-nls --save
npm install monaco-editor-webpack-plugin --save
npm install monaco-editor-esm-webpack-plugin --save-dev

推薦安裝的依賴版本對應：package.json 

{
  "dependencies": {
    "monaco-editor": "^0.20.0",
    "monaco-editor-nls": "^2.0.0",
    "monaco-editor-webpack-plugin": "^1.9.1",
  },
  "devDependencies": {
    "monaco-editor-esm-webpack-plugin": "^2.0.0"
  }
}

webpack.config.js 添加配置：（此處使用vue-cil3.0 配置在vue.config.js里面）

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

此處需要引入monaco-editor-esm-webpack-plugin，引入monaco-editor-webpack-plugin無法漢化成功設置語言包

// 漢化 monaco
import { setLocaleData } from "monaco-editor-nls"
import zh_CN from "monaco-editor-nls/locale/zh-hans"
setLocaleData(zh_CN)
 
 
//先漢化語言，再加載monaco才能漢化成功，使用import方式無法漢化
//需要使用require方式引入monaco-editor
//import * as monaco from 'monaco-editor' 
const monaco = require("monaco-editor/esm/vs/editor/editor.api");

設置完以上配置后，漢化成功效果如下：

“vue如何使用monaco editor漢化右鍵菜單”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！