3

我正在尝试将 Vue-Splide 添加到我的 Nuxt 项目中，在按照 Vue-Splide 文档安装插件并将其注册为 Nuxt 插件后出现错误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>

转换 Vue-Splide后，我现在收到错误window is not defined，并且堆栈跟踪显示它正在发生node_modules\@splidejs\splide\dist\js\splide.js，我尝试用 包围 splide 标签<client-only></client-only>，但这似乎不起作用。

我在这里还缺少什么？

更新以包含我的依赖项

"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"
}
4

2 回答 2

1

vue-splide 集成的文档清楚地在谈论 Vue3 组合 API。

检查vue-splide的 github 问题，我发现这个引用了您在上面链接的解决方案。同时，在尝试此操作时，这些是我在 CLI 中的警告。

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

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

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

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

PS：不需要 atranspile因为这根本不是问题

/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>

它工作得很好

如果有人想获得更多最新信息或mantainer的官方回答，我已经在github issue中报告了这个问题。
编辑：我们收到了关于不兼容的确认。此外，<client-only>还需要使用 来防止DOM mismatch。

于 2021-11-30T01:58:57.973 回答
1

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

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

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

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

于 2021-12-01T17:50:21.807 回答