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

Question

“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

Answer 1

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

npm i swiper@^6.8.4

Answer 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

Answer 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" 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

问候