无法使用nuxtjs在模块外使用import语句

Question

我正在尝试使用vue-agile传送带，我可以在安装它之后立即安装并运行它，而我正在使用NUXT，但是在重新启动服务器后我仍然收到此错误，并且找不到任何错误解决方案

<template>
  <div>
    <agile>
      <div class="slide">
        <img src="/img/img2.jpg" alt="" />
      </div>
      <div class="slide">
        <img src="/img/img1.jpg" alt="" />
      </div>
    </agile>
  </div>
</template>
<script >
import { VueAgile } from "vue-agile";
export default {
  name: "",
  layout: "",
  middleware: [],
  data() {
    return {};
  },
  components: {
    agile: VueAgile,
  },
  
};
</script>

Answer 1

您是否查看了有关how to use this plugin in Nuxt的文档，而不是常规的Vue？

plugins / vue-agile.js

import Vue from 'vue'
import VueAgile from 'vue-agile'

Vue.use(VueAgile)

nuxt.config.js

export default {
    plugins: ['~/plugins/vue-agile'],

    build: {
        transpile: ['vue-agile']
    }
}

要使用不带SSR的组件，请使用client-only组件：

<client-only placeholder="Loading...">
    <agile>...</agile>
</client-only>

Answer 2

在脚本标签中添加type="module"

<script type="module">
import { VueAgile } from "vue-agile";
export default {
  name: "",
  layout: "",
  middleware: [],
  data() {
    return {};
  },
  components: {
    agile: VueAgile,
  },
  
};
</script>

Answer 3

上面塞尔吉奥的回答大部分是准确的，但需要一点时间。

nuxt.config.json 配置需要以下更新。不需要 build 配置。

plugins: [
    { src: '~/plugins/vue-agile', mode: 'client' }
]