找不到无法使用swipper/vue依赖项

Question

"vue"："2.6.14"；"滑动器"："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？？裁判0-0/node_modules/vue加载程序/lib？？vue加载程序选项/src/components/Swiper.vue？vue&type=脚本&lang=js&
• 刷入/node_modules/cache-loader/dist/cjs.js？？ref--12-0/node_modules/babel-loader/lib/node_modules/cache-loader/dist/cjs.js？？裁判0-0/node_modules/vue加载程序/lib？？vue加载程序选项/src/components/Swiper.vue？vue&type=脚本&lang=js&

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

我尝试安装：

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

但出现以下错误：

npm ERR！代码ENOLOCALnpm ERR！无法从"@\刷\ css"因为它不包含package.json文件。

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

Answer 1

最新版本的Swiper在模块导入方面似乎存在持续的问题
目前，我建议您使用Swiper v6作为快速解决方案，但您应该尝试查看是什么导致了这个问题(可能与您的bundler有关)。

npm i swiper@^6.8.4

编辑：如果您想使用Swiper 7(来自Swiper 6)，您的问题的解决方案可能在Swiper的迁移指南中。

Answer 2

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

Vue3+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

问候