如何在Nuxt中进行动态导入

Question

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

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

由于错误是在import语句中抛出的，我建议使用动态导入，正如我在这里的另一个答案中所解释的那样。

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

---

EDIT：我不确定Ace的情况，这可能是一个巨大的变化，但你也可以看看vue monaco，它在流行方面很受欢迎(香草摩纳哥编辑(。

EDIT2:mounted实际上只在客户端上运行，因此您可以剥离process.client条件。同时，如果您想在created(在服务器和客户端上都运行(等其他挂钩中运行一些逻辑，我会在这里使用它。点击此处了解更多信息。

---

EDIT3：与问题没有直接关系，但有些包暴露了一个仅在客户端可用的组件(不支持SSR(，在这种情况下，您可以仅在客户端导入该组件，并轻松防止任何其他错误。

Answer 2

Nuxt插件

IMHO你在正确的轨道上与"；插件"；解决方案唯一的错误是Vue.use(Ace)部分。这只适用于vue插件。

插件文件可能看起来有点像：

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>