vue-splide 仅适用于 Nuxt 开发环境

Question

我在尝试使 vue-splide 在 nuxt dev 之外工作时遇到问题，在生成静态或 spa 后，它无法正常工作。

将 nuxt.config.js 中的目标从 static 更改为 SPA 并不能解决问题。我没有使用 nuxt generate，而是尝试了 nuxt build，结果是一样的。

两张图片在这里：

滑块仅在其中一个中起作用，正如所见。

有任何关于使其正常工作以便我可以部署站点的帮助吗？

nuxt.config.js

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Visgrow Internships',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,300;2,100&display=swap' },
    ],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [{ src: '~/plugins/splide.client.js', ssr: false }],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios'
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
}

splide.client.js

import Vue from 'vue';
import VueSplide from '@splidejs/vue-splide';
// import '@splidejs/splide/dist/css/splide.min.css';
// Importing the original CSS does not change a thing. Also, I import the above CSS in the bellow css
import '../plugins-css/splide.css';


Vue.use(VueSplide);
new Vue({
    el: '#app',
    render: h => h(App),
});

Answer 1

在我这边试过了，工作得很好。

使用 yarn 或 npm 安装软件包。

yarn add @splidejs/vue-splide

设置插件in the usual way。

vue-splide.client.js

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

Vue.use(VueSplide)

在plugins中导入插件，不需要使用ssr: false（它实际上已经不存在了）和mode因为你去文件后缀client.js.

export default {
  ssr: false,
  target: 'static',
  plugins: ['~/plugins/vue-splide.client.js'],
  ...
}

然后，在视图中使用它非常好，除了样式。

pages/index.vue

<template>
  <div>
    <splide class="custom">
      <splide-slide>
        <img src="https://source.unsplash.com/weekly?water" />
      </splide-slide>
      <splide-slide>
        <img src="https://source.unsplash.com/weekly?fire" />
      </splide-slide>
      <splide-slide>
        <img src="https://source.unsplash.com/weekly?earth" />
      </splide-slide>
    </splide>
  </div>
</template>

<style scoped>
.splide__slide {
  height: 50vh;
  margin: 0 auto;
}
.custom {
  height: 50vh;
  width: auto;
}
</style>

对于这个项目，我选择了 ssr: false 和 target: 'static' (PS: target: SPA does not exist) 所以，我需要做

yarn generate
yarn start

这是结果

vue-splide 仅适用于 Nuxt 开发环境

vue-splide only works in Nuxt dev environment

javascript

vue.js

nuxt.js

splidejs