导入 Ace 编辑器时未定义窗口 [英] window is not defined while importing Ace editor

问题描述

在我的 nuxt 组件中，我想使用 ace 编辑器:

In my nuxt component I want to use the ace editor:

import Ace from "ace-builds/src-noconflict/ace"

安装组件后，我将执行以下操作:

when the component is mounted I am doing the following:

this.editor = Ace.edit...

显然在页面重新加载时服务器上未定义窗口.但不幸的是，我找不到解决此问题的解决方案.

Obviously the window is not defined on the server on page reload. But unfortunately I just can't find a solution to fix this issue.

有没有办法在 mounted() 钩子上导入包?我已经试过了

Is there a way to import a package on the mounted() hook? I already tried

const Ace = require("ace-builds/src-noconflict/ace")

但这似乎不太奏效.您有什么想法可以解决这个问题吗?

But that doesn't quite seem to work. Do you have any ideas to solve this issue?

我已经尝试注册一个插件plugins/ace.js:

I already tried to register a plugin plugins/ace.js:

import Vue from "vue"
import Ace from "ace-builds/src-noconflict/ace"
Vue.use(Ace)

在nuxt.config.js中注册:

plugins: [
    { src: "~/plugins/ace", mode: "client" }
],

但是我现在如何在我的组件中使用 Ace?它仍然未定义...

But how do I use Ace in my component now? It is still undefined...

推荐答案

由于在 import 语句期间抛出错误，我建议使用 动态导入 如我的 这里有其他答案.

Since the error was thrown during the import statement, I'd recommended using dynamic imports as explained in my other answer here.

async mounted() {
  if (process.browser) {
    const Ace = await import('ace-builds/src-noconflict/ace')
    Ace.edit...
  }
},

来自官方文档:https://nuxtjs.org/docs/2.x/internals-glossary/context

我不确定 Ace，这可能是一个巨大的变化，但你也可以看看 vue-monaco，这是从肘到肘的流行明智(香草摩纳哥编辑器).

I'm not sure about Ace and it's maybe a drastic change but you may also give a look to vue-monaco which is elbow-to-elbow popularity wise (vanilla Monaco editor).

这篇关于导入 Ace 编辑器时未定义窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！