无法使用未找到的 swiper/vue 依赖项

Posted 2023-02-23

【中文标题】无法使用未找到的 swiper/vue 依赖项

【英文标题】：Unable to use swiper/vue dependencies not found

【发布时间】：2021-11-09 17:21:21

【问题描述】：

“vue”：“^2.6.14” "swiper": "^7.0.5",

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

我按照示例尝试默认导入，但是：

未找到这些依赖项：

@/swiper/css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist /cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Swiper.vue?vue&type=script&lang=js& ./node_modules/cache-loader/dist/cjs.js 中的 swiper/vue??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs .js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Swiper.vue?vue&type=script&lang=js&

要安装它们，你可以运行：npm install --save @/swiper/css swiper/vue

我尝试安装：

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

但出现以下错误：

npm 错误！代码 ENOLOCAL npm 错误！无法从“@\swiper\css”安装，因为它不包含 package.json 文件。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ C:\Users\A262556\AppData\Roaming\npm-cache_logs\2021-09-14T13_57_46_048Z-debug.log

【问题讨论】：

我可以确认我对 Vue 2.6.14 和 SwiperJs 7.0.8 有同样的问题

【参考方案1】：

似乎有一个ongoing issue 带有关于模块导入的最新版本的 Swiper。 目前，我建议您使用 Swiper v6 作为快速修复，但您应该尝试查看导致此问题的原因（可能与您的捆绑器有关）。

npm i swiper@^6.8.4

【讨论】：

我也遇到同样的错误

@Asqan ，您可能正在使用另一个存在此捆绑程序问题的依赖项。您应该创建一个包含与您的问题相关的更多信息的问题，希望您能找到解决方案！

我确信它将被标记为“重复”，并且我确信它是导致此错误的 swiper。如果我将它降级到 3.8.4，它就解决了。

【参考方案2】：

使用直接样式导入为shown in this example for React:

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

【参考方案3】：

Vue 3 + Vite 上 Swiper 7.4.1 的简​​单解决方案并使用 Webpack 编译 正在使用别名。

所有这些文件都位于基础结构上：

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"  />
                    </swiper-slide>

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

                    <swiper-slide>
                        <img src=“some_image.jpg"  />
                    </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

问候