vue使用monaco?editor漢化右鍵菜單示例
更新時間:2022年08月07日 08:43:17 作者:文藝小IT
這篇文章主要為大家介紹了vue使用?monaco?editor?漢化右鍵菜單實現(xiàn)漢化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
安裝依賴插件
首先使用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漢化右鍵菜單示例的詳細內容,更多關于vue右鍵菜單漢化的資料請關注腳本之家其它相關文章!
相關文章
vue post application/x-www-form-urlencoded如何實現(xiàn)傳參
這篇文章主要介紹了vue post application/x-www-form-urlencoded如何實現(xiàn)傳參問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題
這篇文章主要介紹了VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題。具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02

