解决: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

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

如何解决idea的Module:‘:app‘platform‘android-32‘not found.问题

《如何解决idea的Module:‘:app‘platform‘android-32‘notfound.问题》:本文主要介绍如何解决idea的Module:‘:app‘platform‘andr... 目录idea的Module:‘:app‘pwww.chinasem.cnlatform‘android-32

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》:本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Pyserial设置缓冲区大小失败的问题解决

《Pyserial设置缓冲区大小失败的问题解决》本文主要介绍了Pyserial设置缓冲区大小失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录问题描述原因分析解决方案问题描述使用set_buffer_size()设置缓冲区大小后,buf

PyInstaller打包selenium-wire过程中常见问题和解决指南

《PyInstaller打包selenium-wire过程中常见问题和解决指南》常用的打包工具PyInstaller能将Python项目打包成单个可执行文件,但也会因为兼容性问题和路径管理而出现各种运... 目录前言1. 背景2. 可能遇到的问题概述3. PyInstaller 打包步骤及参数配置4. 依赖