Vite + Vue3.0 构建项目, 引入模块报错

问题

在学习Vue3.0的过程中,自己搭建了一个项目深入学习。
正常 npm init vite-app <project> 搭建完成项目
在对接接口时, 引入了qs依赖用于解析字符串与序列化字符串

这时我是怎么引入的?(划重点!!这是错误的引入方式)
npm install qs --save-dev
但是启动项目时报错
The requested module ‘/@modules/qs/lib/index.js’ does not provide an export named ‘default’
image.png

百思不得其解
后来在大佬的帮助下解决了此问题(此处挂上大佬掘金账号: cherish553 可以学习vue源码!)

解决方案

解决方案就是将依赖下载到 dependencies生产环境中
先执行 npm uninstall qs 卸载掉
后执行 npm install qs 将依赖下载到 dependencies生产环境

原因

vite 是基于原生ES模块,(可以学习一下ESM 与 CJS的区别), 这就要求了依赖模块要以export default的方式导出,import * from *的方式引入
OK!
这时我们分别看一下在 devDependencies 与 dependencies 中分别引入依赖的区别

devDependencies 开发环境

image.png

dependencies 生产环境

image.png

由上所示,vite在引入依赖时,只有在dependencies才会将依赖进行编译
因为我并没有去看vite的源码,也不太懂具体的编译规则, 所以以上解释就仁者见仁智者见智了

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14741.html

发表评论

登录后才能评论