解决:Cannot resolve vue-awesome-swiper/dist/ssr

2024-03-08 23:50

本文主要是介绍解决:Cannot resolve vue-awesome-swiper/dist/ssr,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

解决:Can't resolve 'vue-awesome-swiper/dist/ssr

  • 一·问题描述:
    • (1)做《谷粒学苑》整合前端页面时,执行“npm run dev”命令时报这个异常
    • (2)本人配置如下图:
    • (3)在“node_modules/vue-awesome-swiper/dist/”目录下,根本就没有ssr.js文件。
  • 二·问题原因:
    • (1)直接原因:安装vue-awesome-swiper时执行的npm命令是:“npm install vue-awesome-swiper”这个命令是默认安装最新版的。结果官方在更新的时候,对原本的文件架构做了一些调整。这就导致我们出现了这个问题
    • (2)根本原因:vue-awesome-swiper安装的版本与我们项目中的配置不适应
  • 三·解决办法:本人采用的是降低版本方法,当然网上也存在使用新版本的修改配置文件的解决方法
    • (1)先卸载当前vue-awesome-swiper插件:
    • (2)更换vue-awesome-swiper版本:安装3.1.3版本(老师视频使用的版本)
    • (3)保持原有配置不改变,再次启动项目:此时你才能看到vue-awesome-swiper目录结构发生改变,且报错消失
    • (4)结果如下图所示:相应目录下面有ssr.js文件,报错也消失
  • 四·友情链接:
    • 解决:Cannot resolve “swiper/dist/css/swiper.css

一·问题描述:

(1)做《谷粒学苑》整合前端页面时,执行“npm run dev”命令时报这个异常

(2)本人配置如下图:

在这里插入图片描述
在这里插入图片描述

(3)在“node_modules/vue-awesome-swiper/dist/”目录下,根本就没有ssr.js文件。

在这里插入图片描述

二·问题原因:

(1)直接原因:安装vue-awesome-swiper时执行的npm命令是:“npm install vue-awesome-swiper”这个命令是默认安装最新版的。结果官方在更新的时候,对原本的文件架构做了一些调整。这就导致我们出现了这个问题

(2)根本原因:vue-awesome-swiper安装的版本与我们项目中的配置不适应

三·解决办法:本人采用的是降低版本方法,当然网上也存在使用新版本的修改配置文件的解决方法

(1)先卸载当前vue-awesome-swiper插件:

#卸载命令:npm uninstall vue-awesome-swiper

(2)更换vue-awesome-swiper版本:安装3.1.3版本(老师视频使用的版本)

#安装vue-awesome-swiper插件3.1.3版本命令:npm install vue-awesome-swiper@3.1.3 --save

(3)保持原有配置不改变,再次启动项目:此时你才能看到vue-awesome-swiper目录结构发生改变,且报错消失

#启动项目命令:npm run dev

(4)结果如下图所示:相应目录下面有ssr.js文件,报错也消失

在这里插入图片描述

四·友情链接:

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

https://blog.csdn.net/weixin_48033662/article/details/122770392

这篇关于解决:Cannot resolve vue-awesome-swiper/dist/ssr的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/788831

相关文章

C++右移运算符的一个小坑及解决

《C++右移运算符的一个小坑及解决》文章指出右移运算符处理负数时左侧补1导致死循环,与除法行为不同,强调需注意补码机制以正确统计二进制1的个数... 目录我遇到了这么一个www.chinasem.cn函数由此可以看到也很好理解总结我遇到了这么一个函数template<typename T>unsigned

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

504 Gateway Timeout网关超时的根源及完美解决方法

《504GatewayTimeout网关超时的根源及完美解决方法》在日常开发和运维过程中,504GatewayTimeout错误是常见的网络问题之一,尤其是在使用反向代理(如Nginx)或... 目录引言为什么会出现 504 错误?1. 探索 504 Gateway Timeout 错误的根源 1.1 后端

解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

《解决升级JDK报错:modulejava.basedoesnot“opensjava.lang.reflect“tounnamedmodule问题》SpringBoot启动错误源于Jav... 目录问题描述原因分析解决方案总结问题描述启动sprintboot时报以下错误原因分析编程异js常是由Ja

深度剖析SpringBoot日志性能提升的原因与解决

《深度剖析SpringBoot日志性能提升的原因与解决》日志记录本该是辅助工具,却为何成了性能瓶颈,SpringBoot如何用代码彻底破解日志导致的高延迟问题,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言第一章:日志性能陷阱的底层原理1.1 日志级别的“双刃剑”效应1.2 同步日志的“吞吐量杀手”

MySQL 表空却 ibd 文件过大的问题及解决方法

《MySQL表空却ibd文件过大的问题及解决方法》本文给大家介绍MySQL表空却ibd文件过大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录一、问题背景:表空却 “吃满” 磁盘的怪事二、问题复现:一步步编程还原异常场景1. 准备测试源表与数据

解决Nginx启动报错Job for nginx.service failed because the control process exited with error code问题

《解决Nginx启动报错Jobfornginx.servicefailedbecausethecontrolprocessexitedwitherrorcode问题》Nginx启... 目录一、报错如下二、解决原因三、解决方式总结一、报错如下Job for nginx.service failed bec