fix(ui): 修复 Monaco 异步初始化触发远程加载

This commit is contained in:
gary.fu
2026-11-04 16:06:00 +08:00
parent f31fe5f59a
commit 6bd822bb93
+13 -8
View File
@@ -1,5 +1,5 @@
import VueMonacoEditor, { loader } from '@guolao/vue-monaco-editor'
import { ref, watch, toRaw, h, withDirectives, resolveDirective } from 'vue'
import { ref, watch, toRaw, h, withDirectives, resolveDirective, defineAsyncComponent } from 'vue'
const MonacoLoader = () => import('monaco-editor')
const WorkerImporters = {
@@ -153,13 +153,18 @@ export const getLoadingDiv = (attrs = {}) => {
export default {
install (app) {
app.component(VueMonacoEditor.name, {
setup (props) {
if (loader.__getMonacoInstance() === null) {
MonacoLoader().then(monaco => loader.config({ monaco }))
app.component(VueMonacoEditor.name, defineAsyncComponent({
loader: async () => {
// 等待本地 Monaco 配置完成后再创建编辑器,避免触发默认 CDN 加载。
const monaco = await MonacoLoader()
loader.config({ monaco })
return {
setup (props) {
return () => h(VueMonacoEditor, props, () => [getLoadingDiv()])
}
}
return () => h(VueMonacoEditor, props, () => [getLoadingDiv()])
}
})
},
loadingComponent: { render: () => getLoadingDiv() }
}))
}
}