如何在 Nuxt 中进行动态导入？

Question

在我的 nuxt 组件中，我想使用 ace editor:

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

当组件被挂载时，我正在执行以下操作：

this.editor = Ace.edit...

很明显the window is not defined 在服务器上重新加载页面。但不幸的是，我无法找到解决此问题的解决方案。

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

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

但这似乎不太奏效。您有解决这个问题的想法吗？

我已经尝试注册插件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？它仍然未定义...

Answer 1

由于在导入语句期间引发错误，我建议使用 dynamic imports，如我的 other answer here 中所述。

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

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

---

编辑：我不确定 Ace，这可能是一个巨大的变化，但您也可以看看 vue-monaco，它是肘部到肘部的普及明智（香草摩纳哥编辑）。

EDIT2：mounted 实际上仅在客户端上运行，因此您可以剥离 process.client 条件。同时，如果你想在其他钩子中运行一些逻辑，比如created（在服务器+客户端上运行），我确实让它在这里。更多信息here.

Answer 2

Nuxt 插件

恕我直言，您使用“插件”解决方案走在正确的轨道上。唯一的错误是 Vue.use(Ace) 部分。这仅适用于vue plugins。

插件文件可能看起来像这样：

import Ace from 'ace-builds/src-noconflict/ace'
import Theme from 'ace-builds/src-noconflict/theme-monokai'

export default ({ app }, inject) => {
  inject('ace', {
    editor: Ace,
    theme: Theme
  })
}

然后你可以使用这个插件并以这种方式在组件中启动编辑器：

<template>
  <div id="editor">
    function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
    }
  </div>
</template>

<script>
export default {
  data () {
    return {
      editor: {}
    }
  },
  mounted () {
    this.editor = this.$ace.editor.edit('editor')
    this.editor.setTheme(this.$ace.theme)
  }
}
</script>