0

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

将目标nuxt.config.js从staticto更改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),
});
4

1 回答 1

1

在我这边试了一下，效果很好。

yarn使用或安装软件包npm。

yarn add @splidejs/vue-splide

以通常的方式设置插件。

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: falseand target: 'static'(PS: target: SPA does not exist ) 所以，我需要做

yarn generate
yarn start

这是结果 在此处输入图像描述

于 2021-05-19T12:54:50.590 回答