pnpm的坑

已于 2024-07-19 14:42:31 修改
阅读量581 收藏 5
点赞数 7
文章标签： 前端 pnpm vue
于 2024-07-04 17:04:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33239420/article/details/140183322
版权

请问pnpm的两个坑怎么解决：

第一个坑：没有节省磁盘空间

我已经配置了依赖的存储位置，
在这里插入图片描述

但我在项目里pnpm install以后，发现依赖包还是很大，在这里插入图片描述

然后发现里面的链接并不是指向先前配置的依赖存储位置，而是指向项目目录里的node_modules\.pnpm里，一点也没有节省磁盘空间，
在这里插入图片描述

第二个坑：找不到依赖

运行pnpm dev的时候报需要安装
To install them, you can run: npm install --save swiper/dist/css/swiper.css,
在这里插入图片描述

因为我用的vue-awesome-swiper3.1.3,需要手动在代码里import 'swiper/dist/css/swiper.css，

然后发现并不是缺少swiper，而是指向问题，因为swiper/dist/css/swiper.css实际跑到了node_modules\.pnpm里，导致找不到依赖，babel-core也是同样的问题，

在这里插入图片描述

请问这两个问题怎么解决

解决办法

第一个问题用pnpm的workspace功能，第二个问题需要在package.json里显式的安装依赖

hello&Kitty
关注
pnpm才是前端工程化项目的未来
weixin_65832899的博客
02-20 1223
pnpm才是前端工程化项目的未来
Monorepo 項目管理方案：lerna + yarn workspace / pnpm
weixin_46803507的博客
10-15 4141
Monorepo 項目管理方案：lerna + yarn workspace / pnpm前言正文什麼是 Monorepo？Lerna安裝初始化項目創建 npm 包增加模塊依賴發布依賴包管理monorepo 實踐技術方案lerna + yarn workspace搭建環境清理環境依賴管理項目構建發布pnpmpnpm VS lerna + yarn workspace建立 monorepo workspace依賴管理配置啟動命令結語 前言 會寫這篇是因為這幾天開始了畢業設計的相關工作，然後跟著一個同學加入了一
pnpm踩过的那些坑！
jueaiqingcheng68的博客
11-14 941
PNPM 是一个面向 JavaScript/TypeScript 项目的包管理器。它类似于 npm 和 Yarn，但与它们不同的是，PNPM 采用了一种独特的包管理策略，称为「逻辑层次布局」（Recursive Node_modules），以提供更高效的依赖管理和更快的安装速度。
pnpm 安装的依赖 项目跑不起来 报错我项目依赖找不到？
业余前端的职业经历
02-06 1万+
比如一些依赖可能在node_modules 根目录下 让所有的 依赖于它的依赖可以访问， 再其次就是自动默认安装缺失的依赖，还有就是依赖丢失或者找不到的话 命令自动失败。然后项目就跑不起来，我很奇怪 然后重新使用 npm i走了遍发现可以正常运行。后面翻了翻pnpm的文档才发现 这玩意也需要配置一些东西 才生效。我只是知道 有一个pnpm的这个包管理工具 但是从来没用过！然后开始分析报错，报的都是依赖找不到的问题 就很奇怪。让我知道这肯定是 pnpm 的问题了，我看到下面报错中 更多的都是依赖缺失。
nvm全局包踩坑（pnpm、typescript、mkcert等等 ）
最新发布
weixin_52160438的博客
03-18 412
nvm：1.1.11当前使用的 node：22.12.0node 全局包路径：npm prefix -g 查看 node 全局包安装的路径例： C:\Program Files\nodejs\node_global\node_modulesnode 当前版本路径：例：D:\app\nvm\nodenvm 路径：例：D:\app\nvm\nvm\nvm。
npm或者pnpm或者yarn安装依赖报错ENOTFOUND解决办法
01-23 1万+
如果报错说安装依赖报错，大概率是因为npm源没有设置对，比如我这里安装protobufjs的时候报错：ENOTFOUND。发现是淘宝的源地址：https://registry.npm.taobao.org。
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
道阻且长，行则将至。
12-04 7120
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Swiper插件，执行了npm install swiper vue-awesome-swiper --save，并且也引入了，按照他的提示执行最后还是报错 将main.js 中 import 'swiper/css/swiper.css' 应该替换为 import 'swiper/swiper-bundle.
记录错误：To install it, you can run: npm install --save swiper/css/swiper.css
qq_44755188的博客
08-20 1万+
使用npm下载了：npm install vue-awesome-swiper --save， 转到“ node_modules”文件夹，找到“ vue-awesome-swiper”， 选择“ dist”，文档中没有要求的css文件一直报错找不到此文件。 修改前： import 'swiper/dist/css/swiper.css' 修改后： import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css' .
jiaminghi/data-view dataV for vite vue2 windows补丁 for pnpm
02-11
yarn npm cnpm pnpm可通用的，其实就是底层node_modules位置不一样而已，不过修改原理跟代码基本都是一直的，大家可以自行下载研究，windows macos linux均兼容。如果下载错了请私信我。 下面说下安装步骤： 1.在...
jiaminghi/data-view dataV for vite2 vue3 windows补丁 for pnpm
03-19
yarn npm cnpm pnpm可通用的，就是底层node_modules位置不一样而已，不过修改原理都是一样的，大家可以自行下载研究，目前仅在windows下测试，macos跟linux还未测试。 下面说下安装步骤： 1.在项目更目录中安装，...
vue3 vite3 typescript 高德地图JSAPI改版 pnpm
04-12
默认使用的是pnpm，理论上支持npm yarn cnpm 官网提供的例子很老了，不支持vite2、vite3下直接调用，会报错Error: Invalid Object: Pixel(NaN, NaN) 还有关于shallowRef的两种import方式 更多说明请查看压缩包内-...
Vue中引入swiper报错--已解决
热门推荐
darabiuz的博客
10-24 2万+
1.首先上报错信息 These dependencies were not found: swiper in ./node_modules/vue-awesome-swiper/dist/vue-awesome-swiper.js 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
记录新电脑安装nvm，pnpm时遇到的坑
qq_39899216的博客
08-15 1442
nvm版本切换成功却无效
使用PNPM进行依赖管理
真全栈成长之路~~~
07-03 653
【代码】使用PNPM进行依赖管理。
使用swiper轮播图插件
做名安静的coder
04-06 351
1.安装插件 npm install swiper vue-awesome-swiper --save 2.全局注册 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // import style import 'swiper/css/swiper.css' Vue.use(VueAwesomeS...
解决：Cannot resolve “swiper/dist/css/swiper.css“
weixin_48033662的博客
02-02 6377
解决：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”这个命令是默认安装最新版的。结果官方在更新的时候，对原本的文件架构做了一些调整。这就导
Vue Swiper导入swiper.css报错This dependency was not found:swiper/dist/css/swiper.css
weixin_46836035的博客
07-28 1万+
Vue Swiper导入swiper.css错误 Vue使用swiper下 To install it, you can run: npm install --save swiper/dist/css/swiper.css 使用npm下载了：npm install vue-awesome-swiper --save 转到“ node_modules”文件夹， 找到“ vue-awesome-swiper”， 选择“ dist” 文档中没有要求的css文件一直报错找不到此文件。 之前：官方推荐使用 impor
Vue Swiper 找不到swiper.css 报错This dependency was not found:swiper/dist/css/swiper.css
A_linyuan的博客
08-14 3016
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’ 完整
To install it, you can run: npm install --save !style-loader!css-loader!less-loader!./assets/less
行走在前端的小菜仔的博客
03-04 796
遇到的问题 * !style-loader!css-loader!less-loader!./assets/less/custom-tree-switch.less in ./src/main.js To install it, you can run: npm install --save !style-loader!css-loader!less-loader!./assets/less/custom-tree-switch.less 原因 缺少相关依赖而导致的 解决方法 如果是 常规 的，执行
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值