【NUXT】 Cannot resolve “swiper/dist/css/swiper.css“ （写谷粒学院碰到）

最新推荐文章于 2024-08-28 20:48:47 发布

小样x

最新推荐文章于 2024-08-28 20:48:47 发布

阅读量601

点赞数 1

分类专栏： Java后端相关随笔文章标签： java vue

本文链接：https://blog.csdn.net/weixin_39615182/article/details/119515323

版权

Java后端相关随笔专栏收录该内容

28 篇文章 10 订阅

订阅专栏

报错内容

这个错就是没找到这个文件，原因如下
在这里插入图片描述

官方说6.x版本里是没有dist这个文件夹的，所以引入要用swiper/swiper-bundle.css（后面会说在哪里引入），你可以自己找下自己用npm install命令在node_modules文件夹里下载完成的两个依赖swiper和vue-awesome-swiper
在这里插入图片描述

在这里插入图片描述

会发现自己默认给你下载的是6.8.1，这个6.x版本是没有dist文件夹的，所以当然找不到了，那肯定就会报这个Cannot resolve找不到的错误了，6.x这里用的是swiper-bundle.css

关键：所以你在nuxt.config.js中要把它改为swiper/swiper-bundle.css
在这里插入图片描述
同理也可以查看vue-awesome-swiper版本

nuxt-swiper-plugin.js如下

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

然后你再输入命令npm run dev就成功了
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小样x

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

关于Cannot resolve “swiper/dist/css/swiper.css“ 或者Cannot define “swiper/dist/css/swiper.css问题的解决方法

qq_45800365的博客

01-11

562

关于Cannot resolve “swiper/dist/css/swiper.css“ 或者Cannot define “swiper/dist/css/swiper.css问题的解决方法

以解决Module not found: Error: Can't resolve 'vue-awesome-swiper/dist/ssr'或 vue中使用swiper出现Can't resolve...

牧牛人Alec

08-17

5586

错误提示有多种，但我遇见的基本就这一个原因造成的。不成功的解决方式不知道什么原因，开始swiper文件并没自动安装上。安装swiper： npm install swiper vue-awesome-swiper --save 然而在\node_modules\swiper里面会发现没有dist目录，所以出现这个错。又尝试过在swiper文件夹下创建dist，但并没有解决问题。...

2 条评论您还未登录，请先登录后发表或查看评论

Cannot resolve “swiper/dist/css/swiper.css“

Wiken4的博客

11-18

132

Cannot resolve “swiper/dist/css/swiper.css“

vue2用swiper报错解决

最新发布

wolfman的博客

08-28

160

提示：To install it, you can run: npm install --save /swiper/dist/css/swiper.css。网上找了很多，看见都是说版本5x就import 'swiper/css/swiper.css'6x就import 'swiper/swiper-bundle.css'npm install --save swiper@5 // 安装低版本。解决css文件找不到。

解决：Cannot resolve “swiper/dist/css/swiper.css“

weixin_48033662的博客

02-02

6139

解决：Cannot resolve "swiper/dist/css/swiper.css"一·问题描述：（1）做《谷粒学苑》整合前端页面时，执行“npm run dev”命令时报这个异常（2）初始配置如下图：（3）在“node_modules/swiper/”目录下，根本就没有css/swiper.css这个文件。二·问题原因：（1）直接原因：安装swiper时执行的npm命令是：“npm install swiper”这个命令是默认安装最新版的。结果官方在更新的时候，对原本的文件架构做了一些调整。这就导

Nuxt.js 中使用Swiper Animate

01-07

Vue Nuxt.js 中使用Swiper Animate废话不多说，咱就单刀直入。废话不多说，咱就单刀直入。首先安装在 vue 中使用的 Swiper npm i vue-awesome-swiper --save。安装完成后，在 plugins 文件夹下新建一个 swiper.js...

前端后端分离的个人内容管理(CMS)系统源码包含权限、博客、导航等模块采用Nuxt、Vue2/3和SpringBoot框架

06-15

前端后端分离的个人内容管理(CMS)系统源码。包含权限、博客、导航等模块。采用Nuxt、Vue2/3和SpringBoot框架，项目经过...> 如果你的MySQL版本较新，可能会碰到无法连接的错误。可以重新设置一下账号权限，方式如下：

在使用nuxt前端时，下载好swiper和vue-awesome-swiper后报错 ERROR Failed to compile with 1 errors

huishao_tongzhou的博客

08-28

717

在确定他们的版本都正确的情况下进行运行npm run dev时：还是报错 ERROR Failed to compile with 1 errors This dependency was not found: * vue-awesome-swiper/dist/ssr in ./plugins/nuxt-swiper-plugin.js To install it, you can run: npm install --save vue-awesome-swiper/dist/ssr...

Error: Can‘t resolve ‘swiper/css/swiper.css‘ 解决方案

ellynxu的博客

09-04

6903

问题出在 main.js 中import 'swiper/css/swiper.css'这句话上应该替换为import 'swiper/swiper-bundle.css'

swiper包含相关css，js

11-28

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

nuxt 引入swiper插件报错 Cannot resolve swiper/dist/css/swiper.css

jacksonlai的专栏

05-28

1638

npm install vue-awesome-swiper 执行完毕后运行npmrundev 后报错：Cannot resolve "swiper/dist/css/swiper.css" 之前是baidu了个教程最后发现还得去官网看 npm install swiper vue-awesome-swiper --save 只装vue-awesome-swiper不行我当前使用的版本是4.1.1目前最新版本 ...

NUXT项目使用Swiper显示Cannot resolve “swiper/dist/css/swiper.css”

qq_50963067的博客

08-18

267

NUXT项目使用Swiper显示Cannot resolve “swiper/dist/css/swiper.css” npm install swiper swiper@3.4.2 --save-dev nuxt-swiper-plugin.js文件内容 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 去掉了后面的/dist/ssr路径，这是Swiper

引入NUXT vue-awesome-swiper 插件出错 Cannot resolve “swiper/dist/css/swiper.css“

03-23

2354

报错： ERROR Could not compile template E:\IDEA\OnlineEduProject-Web\guli_front\node_modules\@nuxt\vue-app\template\App.js: Cannot resolve “swiper/dist/css/swiper.css” from “E:\IDEA\OnlineEduProject-Web\guli_front\swiper\dist\css\swiper.css” at node_modules.

Vue Swiper 找不到swiper.css 报错This dependency was not found:swiper/dist/css/swiper.css

qq_40137978的博客

01-27

1198

Vue使用swiper下出错： This dependency was not found:swiper/dist/css/swiper.css To install it, you can run: npm install --save swiper/dist/css/swiper.css 解决：官方说明了Swiper安装6.0版本或以上的话需要引入另外一个css import 'swiper/swiper-bundle.css' 替代 import 'swiper/css/swiper.css' 完整

nuxt找不到vue-awesome-swiper\dist\ssr.js(已解决)

poppy995的博客

10-26

427

安装指定vue-awesome-swiper版本即可解决 npm install vue-awesome-swiper@3.1.3 --save-dev vue-awesome-swiper使用描述注意看下载的Swiper 的版本号 // import style (>= Swiper 6.x) import 'swiper/swiper-bundle.css' // import style (<= Swiper 5.x) import 'swiper/css/swiper.css'

Cannot resolve .....报错问题解决

热门推荐

张老板的博客

05-02

5万+

当导入maven管理的项目后,maven进行自动的下载和解析依赖,有时候因为网络问题,等待太久没下载好,我们就关闭了IDEA,再次打开IDEA时就会报错某某依赖无法解析:Cannot resolve …,是因为我们下载到一半就关闭了IDEA,导致下载的内容不全,所以无法解析. 此时的解决方法是复制报错依赖的版本号前的那段依赖名称:如下图在utools的everything插件里查找该依赖:如下图切换到该文件夹,我们就能看待报错的依赖:如下图我们将该依赖直接删除,或者点击该依赖文件进去找到尾缀为.l

(转)Cannot resolve “swiper/dist/css/swiper.css” from “项目路径\swiper\dist\css\swiper.css”

江小鱼的博客

05-28

6304

修改nuxt.config.js如下： plugins: [ { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false } ], css: [ 'swiper/css/swiper.css' ] 修改nuxt-swiper-plugin.js如下： import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper/dist/v.

nuxt 报错quill Cannot import modules/ImageResize.

09-21

### 回答1：这个错误是因为Quill在构建时没有正确的加载`ImageResize`模块。要解决这个问题，你需要在`nuxt.config.js`中添加以下代码： ```javascript build: { extend(config, ctx) { config.module.rules.push({ test: /quill-image-resize-module/, loader: 'babel-loader', exclude: /(node_modules)/ }) } } ``` 然后，在你的组件中将Quill引入，并加载`ImageResize`模块： ```javascript import Quill from 'quill' import ImageResize from 'quill-image-resize-module' Quill.register('modules/ImageResize', ImageResize) ``` 这应该会解决你的问题。 ### 回答2： nuxt 报错 "quill Cannot import modules/ImageResize" 是指在使用 Nuxt.js 框架和 Quill 富文本编辑器时，无法正确导入 modules/ImageResize 模块。要解决这个问题，可以按照以下步骤操作：第一步，确保 Quill 编辑器已经正确安装。可以通过 npm 或 yarn 安装 Quill 编辑器依赖。第二步，查看 Nuxt.js 项目中是否正确引入 Quill 编辑器并配置相关选项。在 nuxt.config.js 文件中，务必确保正确引入 quill 模块，并配置 module 对象中的选项。例如： ```javascript modules: [ 'nuxt-quill', ], quill: { modules: { ImageResize: true, }, }, ``` 第三步，如果按照上述方式配置后仍然出现错误，则可能是由于版本兼容性问题造成的。尝试升级 Nuxt.js 和 Quill 编辑器的版本，以确保它们之间的兼容性。可以通过在 package.json 文件中修改依赖版本或者运行 npm update 或 yarn upgrade 命令来升级。第四步，如果上述步骤仍然无法解决问题，请查看控制台中的错误信息，尤其是具体的错误堆栈信息，以便进一步排查问题的原因。总结：nuxt 报错 "quill Cannot import modules/ImageResize" 可能是由于未正确安装、配置或版本兼容性问题造成的。需要正确安装 Quill 编辑器依赖，配置 nuxt.config.js 文件中的选项，并确保 Nuxt.js 和 Quill 编辑器的版本兼容。如有必要，可以查看错误信息以进行进一步排查。 ### 回答3： Nuxt是一个基于Vue.js的服务端渲染框架，允许我们使用Vue.js来构建更快速、可扩展、更好的SEO的应用程序。而报错"quill Cannot import modules/ImageResize"意味着在使用nuxt框架时出现了quill模块无法导入ImageResize模块的问题。 Quill是一个流行的富文本编辑器，它有一个叫做"ImageResize"的模块，用于在编辑器中调整图像大小。然而，报错信息显示该模块无法被导入。出现这个问题可能有几个原因。首先，请确保你在项目中正确地安装了quill和相关的依赖。你可以通过运行"npm install quill"来安装，如果已经安装了，可以尝试重新安装来解决这个问题。其次，检查你的代码，确保正确地引入了quill和ImageResize模块。你可以尝试重新引入或更改引入路径来解决问题。如果以上方法没有解决问题，可能需要进一步检查你的项目配置。在Nuxt框架中，可以查看nuxt.config.js文件，这里是项目的配置文件。确保你在该文件中正确设置了quill和ImageResize模块的相关配置。你可能需要查看模块的文档以了解正确的配置方式。最后，如果以上方法仍然无法解决问题，可能需要查看报错信息的详细内容和相关文档。报错信息中可能会提供更多的线索和解决方案。你可以尝试在搜索引擎中搜索相关报错信息，或查阅quill和Nuxt的官方文档和社区论坛。总而言之，解决nuxt报错"quill Cannot import modules/ImageResize"的问题需要确认正确安装和引入quill和ImageResize模块，并检查项目配置，最后可以查看详细的报错信息和相关文档来找到解决方案。