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
推薦安裝的依賴版本對應(yīng):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無法漢化成功設(shè)置語言包
// 漢化 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");
設(shè)置完以上配置后,漢化成功效果如下:
以上就是vue使用monaco editor漢化右鍵菜單示例的詳細內(nèi)容,更多關(guān)于vue右鍵菜單漢化的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue中el-table實現(xiàn)無限向下滾動懶加載數(shù)據(jù)
一次性的加載全部的數(shù)據(jù),并且將其渲染到頁面上,就會導(dǎo)致頁面卡頓,往往采用分頁和無限滾動的方式來展示,本文主要介紹了vue中el-table實現(xiàn)無限向下滾動懶加載數(shù)據(jù),感興趣的可以了解一下2023-12-12vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表
這篇文章主要介紹了vue如何從后臺獲取數(shù)據(jù)生成動態(tài)菜單列表,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04