swiper/vue 종속성을 사용할 수 없습니다.

swiper/vue 종속성을 사용할 수 없습니다.

"vue": "^2.6.14" "swiper": "^7.0.5",

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

예시와 같이 기본 가져오기를 시도하지만:

다음 종속성을 찾을 수 없습니다.

• @/swiper/css in ./node_cash/cache-backets/dist/backets.backets.backets.backets?ref--12-0!./node_model/babel-model/lib!/node_model/cache-model/dist/models.model?ref--0-0!/node_module/vue-module/lib?vue-buch-buchien!/src/컴포넌트/Swiper.vue?vue&type=script&time=cript&time&t;
• swiper/vue in ./node_cache-backets/dist/backets.backets.backets의 swiper/vueref--12-0!./node_model/babel-model/lib!/node_model/cache-model/dist/models.model?ref--0-0!/node_module/vue-module/lib?vue-buch-buchien!/src/컴포넌트/Swiper.vue?vue&type=script&time=cript&time&t;

설치하려면 npm install --save @/swiper/css swiper/vue 를 실행합니다.

설치 시도:

npm install --save @/swiper/css swiper/vue

다만, 다음의 에러가 표시됩니다.

npm ERR! 코드 ENOLOCAL npm ERR!패키지가 포함되어 있지 않기 때문에 "@\swiper\css"에서 설치할 수 없습니다.json 파일.

npm ERR!이 실행의 전체 로그는 npm ERR에서 찾을 수 있습니다.C:\Users\A262556\AppData\Roaming\npm-cache_logs\2021-09-14T13_57_46_048Z-debug.log

모듈 Import와 관련하여 Swiper의 최신 버전에 지속적인 문제가 있는 것 같습니다.
현시점에서는, Swiper v6 를 퀵 픽스로서 사용하는 것을 추천합니다만, 이 문제의 원인을 확인해 주세요(번들러에 관련하는 경우가 있습니다).

npm i swiper@^6.8.4

편집: Swiper 7 (Swiper 6부터)을 사용하는 경우 Swiper로부터의 이행 가이드에 문제의 해결책이 기재되어 있을 수 있습니다.

리액트에 대해 다음 예시와 같이 직접 스타일 가져오기를 사용합니다.

import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module

Vue 3 + Vite 상에서 Swiper 7.4.1을 사용하기 쉬운 솔루션은 에일리어스를 사용하는 것입니다.

이 모든 파일은 기본 구조에 있습니다.

vite.config.js

import path from "path";

export default defineConfig({
    resolve: {
        alias: [
            {
                find: "@",
                replacement: path.resolve(__dirname, "src"),
            },
            {
                find: "@SwiperBundleCss",
                replacement: path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"),
            },
            {
                find: "@SwiperBundle",
                replacement: path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"),
            },
            {
                find: "@Swiper",
                replacement: path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"),
            },
            {
                find: "@SwiperVue",
                replacement: path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"),
            },
        ],
    },
    plugins: [ViteRequireContext(), vue()],
});

jsconfig.json

{
    "include": [
      "./src/**/*"
    ],

    "compilerOptions": {
      "baseUrl": ".",
      "target": "esnext",
      "module": "es2015",
      "paths": {
        "@SwiperBundleCss": ["./node_modules/swiper/swiper-bundle.min.css"],
        "@SwiperBundle": ["./node_modules/swiper/swiper-bundle.esm.js"],
        "@Swiper": ["./node_modules/swiper/swiper.esm.js"],
        "@SwiperVue": ["./node_modules/swiper/vue/swiper-vue.js"],
      }
    }
}

vue.config.js

const path = require("path");

module.exports = {
    publicPath: "/",

    …
    
    configureWebpack: {
        resolve: {
            alias: {
                "@SwiperBundle": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"),
                "@SwiperBundleCss": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"),
                "@Swiper": path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"),
                "@SwiperVue": path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"),
            },
        },
    },
};

webpack.config.js

const path = require("path");
…
    mode: "production",
    stats: "errors-only",
    resolve: {
                alias: {
            "@SwiperBundle": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"),
            "@SwiperBundleCss": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"),
            "@Swiper": path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"),
            "@SwiperVue": path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"),
        },
    },
…

그리고 마지막으로 프로젝트에서 선언하는 방법

main.js

…
import "@SwiperBundleCss"; //import css
import { Swiper, SwiperSlide } from "@SwiperVue"; //import component
import SwiperCore, { Pagination, Scrollbar } from "swiper"; //import swiper core and plugins
SwiperCore.use([Pagination, Scrollbar]); //declare two plugins

const app = createApp(App)
           .use(router)
           …
           .component("swiper", Swiper) //declare vue component
           .component("swiper-slide", SwiperSlide) //declare vue component
           …
          .use(devtools);

router.isReady().then(() => app.mount("#app"));

.vue 파일 사용 현황

some_view.vue

<template>
    <div>
        <!—// … //—>
        <swiper
                    :scrollbar="{
                        hide: false,
                    }"
                    :slides-per-view="isMobileScreen"
                    :space-between="10"
                    :grabCursor="true"
                    :loop="true"
                >
                    <swiper-slide>
                        <img src=“some_image.jpg" alt="" />
                    </swiper-slide>

                    <swiper-slide>
                        <img src=“some_image.jpg" alt="" />
                    </swiper-slide>

                    <swiper-slide>
                        <img src=“some_image.jpg" alt="" />
                    </swiper-slide>
                </swiper>
        <!—// … //—>
    </div>
</template>

에일리어스에 대한 자세한 내용은 여기를 참조하십시오.

• https://webpack.js.org/configuration/resolve/
• https://github.com/vuejs/vue-cli/issues/2398
• https://dev.to/alansolitar/webpack-aliases-in-vue-js-41hp

안부 전해요

언급URL : https://stackoverflow.com/questions/69179230/unable-to-use-swiper-vue-dependencies-not-found