为啥 vue-splide 不能与 Nuxt2 一起使用？

Posted

技术标签:

【中文标题】为啥 vue-splide 不能与 Nuxt2 一起使用？【英文标题】：Why is vue-splide not working with Nuxt2?为什么 vue-splide 不能与 Nuxt2 一起使用？ 【发布时间】：2022-01-06 16:07:48 【问题描述】：

我正在尝试将 Vue-Splide 添加到我的 Nuxt 项目中，在 following the Vue-Splide documentation to install the plugin 和 registering it as a Nuxt plugin 之后，我收到错误 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" : />
   </splide-slide>
</splide>

在transpiling Vue-Splide 之后，我现在收到错误window is not defined，堆栈跟踪显示它正在node_modules\@splidejs\splide\dist\js\splide.js 上发生，我尝试用&lt;client-only&gt;&lt;/client-only&gt; 包围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"

【问题讨论】：

我已经用一些突出显示编辑了您的问题并删除了 ~/plugins/splide.client.js 以支持 ~/plugins/splide.js、mode: 'client' 已经这样做了，没有必要重复说我们只想要它客户。我还删除了不相关的代码部分。如果您觉得不合适，请随时自行编辑。 另外，完全不相关，但你能看看我在你的other question 上的回答吗？如果它解决了您的问题，我仍在等待一些反馈。 @kissu 抱歉，我无法回到另一个问题上，因为我现在优先处理这个问题。 【参考方案1】：

vue-splide integration 的文档显然在谈论 Vue3 组合 API。

查看vue-splide 的github 问题，我发现this one 引用了您在上面链接的a solution。同时，在尝试此操作时，这些是我在 CLI 中的警告。

那些也和Vue3有关（与Nuxt2不兼容，只有Nuxt3支持Vue3）。查看所有帖子的日期，它似乎与 Vue3 仍处于 beta-limbo 并且可能没有被所有人采用的时间框架相匹配。

在某个时候，我猜测该软件包可能会在接下来的几个月中失去与 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"
          
        />
      </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"
          
        />
      </SplideSlide>
    </Splide>
  </client-only>
</template>

效果很好

我已在github issue 中报告了此问题，如果有人想获得更多最新信息或管理员的官方答复。 编辑：我们收到了关于非复古兼容性的a confirmation。另外，还需要使用&lt;client-only&gt;来防止DOM mismatch。

【讨论】：

我仍然遇到同样的问题，转译 vue-splide 会抛出` window is not defined , if I don't I get Cannot use import statement outside a module`，我已经有了 vue-splide 0.3 版。 5安装。我正在更新我的帖子以包含我的依赖项 @Danyx 你不需要像我说的那样编译它。此外，使用我展示的插件并将整个内容包装到client-only 中就足够了。用s-s-r: true 尝试过，它在我这边运行良好。另外，请确保您使用的是具有 LTS 版本的节点，我在 14.18.1。这可能来自这里。 我有 包装的 Splide 元素，并且刚刚从节点 v14..17.6 升级到 v.16.13.0 以查看是否是这种情况，仍然得到 Cannot use import statement outside a module @Danyx 将 "type": "module" 添加到您的 package.json 中作为 shown here 以解决此问题。另外，你用的是TS吗？我不确定这个问题来自哪里，但这不是我第一次看到它，您是否在代码中的某处使用了require？ 已经尝试将 "type": "module" 添加到我的 package.json 的根目录中，但它也不起作用，我没有使用 TypeScript，并且在我的源代码中没有任何要求。【参考方案2】：

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

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

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

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

【讨论】：

哦，问题出在部署时。如果我知道的话，会建议尝试将其发送到 Netlify。 @kissu 在本地构建时抛出异常

以上是关于为啥 vue-splide 不能与 Nuxt2 一起使用？的主要内容，如果未能解决你的问题，请参考以下文章

为啥我不能用这个代码读取设备与磁北的偏差？

为啥Linux不能与其他电脑相PING通？

我在 Nuxt 2.14.0 中运行的是啥版本的 Vue？

为啥 NSFileManager 不能与 UIDocumentBrowserViewController 一起使用？

为啥 TransactionScope 不能与 Sqlite 一起使用？

为啥 FileProvider 不能与广播一起使用？