为什么 vue-splide 不能与 Nuxt2 一起工作？

Question

我正在尝试将 Vue-Splide 添加到我的 Nuxt 项目中，在 following the Vue-Splide documentation to install the plugin, and 之后我收到错误 Cannot use import statement outside a module。

nuxt.config.js

buildDir: '../functions/nuxt',
build: {
  publicPath: '/public/',
  vendor: [''],
  extractCSS: true,
  babel: {
    presets: [
      '@babel/preset-env'
    ],
    plugins: [
      ["@babel/plugin-transform-runtime"]
    ]
  }
},
plugins: [
  { src: '~/plugins/splide.client.js', mode: "client" }
],

splide.client.js

import Vue from 'vue';
import VueSplide from '@splidejs/vue-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';

Vue.use(VueSplide);

template

<splide :options="{ rewind: true }" class="banner-container">
  <splide-slide class="slide" v-for="slide in slides" :key="slide.id">
    <img :src="slide.imagen" :alt="slide.tombre" />
   </splide-slide>
</splide>

在之后，我现在收到错误 window is not defined，堆栈跟踪显示它发生在 node_modules\@splidejs\splide\dist\js\splide.js，我尝试用 <client-only></client-only> 包围 splide 标签，但是好像没用。

我还缺少什么？

正在更新以包含我的依赖项

"dependencies": {
  "@nuxtjs/firebase": "^7.6.1",
  "@splidejs/vue-splide": "^0.3.5",
  "firebase": "^8.9.1",
  "isomorphic-fetch": "^3.0.0",
  "nuxt": "^2.0.0"
},
"devDependencies": {
  "@babel/plugin-transform-runtime": "^7.15.0",
  "@babel/preset-env": "^7.15.6",
  "@babel/runtime": "^7.15.4",
  "@nuxtjs/tailwindcss": "^4.2.1",
  "autoprefixer": "^10.4.0",
  "babel-eslint": "^10.0.1",
  "babel-plugin-module-resolver": "^4.1.0",
  "eslint": "^4.19.1",
  "eslint-friendly-formatter": "^4.0.1",
  "eslint-loader": "^4.0.2",
  "eslint-plugin-vue": "^7.19.1",
  "firebase-tools": "^9.22.0",
  "node-sass": "^6.0.1",
  "postcss": "^8.3.11",
  "sass-loader": "^12.3.0",
  "tailwindcss": "^2.2.19"
}

Answer 1

vue-splide integration的文档明明是在讲Vue3组合API。

检查上面链接的 vue-splide, I found this one which is referencing 的 github 期。同时，尝试此操作时，这些是我在 CLI 中收到的警告。

那些也和Vue3有关（不兼容Nuxt2，只有Nuxt3支持Vue3）。查看所有帖子的日期，它似乎与 Vue3 仍处于测试阶段并且可能没有被所有人采用的时间框架有些吻合。

在某些时候，我猜测该软件包可能会在接下来的几个月内失去与 Vue2 的一些追溯兼容性。然后，我尝试安装 @splidejs/vue-splide 的 0.3.5 版本，而不是最新版本，它运行得非常好！

这是让它与 Nuxt2 一起工作的整个设置 nuxt.config.js

plugins: [{ src: '~/plugins/splide.js', mode: 'client' }],

PS：不需要 transpile 因为这根本不是这里的问题

/plugins/splide.js

import Vue from 'vue'
import VueSplide from '@splidejs/vue-splide'
import '@splidejs/splide/dist/css/themes/splide-default.min.css'

Vue.use(VueSplide)

/pages/index.vue

<template>
  <client-only>
    <Splide :options="{ rewind: true }">
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1638204958375-4824be216720?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80"
          alt="Sample 1"
        />
      </SplideSlide>
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1638176061592-d8475d970c19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
          alt="Sample 2"
        />
      </SplideSlide>
    </Splide>
  </client-only>
</template>

它工作得很好

我已经在 github issue 中报告了这个问题，如果有人想获得更多最新信息或维护者的官方答复。
编辑：我们收到了 a confirmation on the non retro-compatibility. Also, the usage of <client-only> is also required to prevent .

Answer 2

问题是由 Firebase 托管所需的配置引起的，如果遵循 Firebase's Server-Side Render Vue Apps with Nuxt.js video。

通过删除 nuxt.config.js 文件中的 buildDir: '../functions/nuxt' 行，项目在本地运行良好，但是，为了部署到 Firebase，您必须：

将 publicPath: '/public/' 替换为 publicPath: '/'，在 src/nuxt.config.js 和 functions/index.js 中。
运行 npm run build.
将src/.nuxt的内容复制到functions/nuxt。
将src/.nuxt/dist/client和src/.nuxt/dist/server的内容复制到public/。

目前我不知道是否有办法让 vue-splide 在构建到 functions 文件夹时工作，因为我已经尝试在 functions 项目上安装 vue-splide 但没有成功。

为什么 vue-splide 不能与 Nuxt2 一起工作？

Why is vue-splide not working with Nuxt2?

firebase

vue.js

nuxt.js

splidejs