vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]
更新时间：2023年06月06日 10:08:34 作者：Pisces_224
这篇文章主要介绍了vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue Module not found: Error:[CaseSensitivePathsPlugin]
今天学习vue项目练手时，出了一个小小的错误：
检查了下，发现自己在模块导入的时候没有和组件文件名大小写完全一致造成的。
改为上述，即必须和文件名一毛一样，大小写敏感，唉。
vue批量导入模块
在基于vue-element-admin的开发时，每添加一个路由文件就要到另外一个文件里import相应的模块，这样开发起来不友好，如果有一种方法批量导入这些新增的文件，开发起来就方便多了。
这时我们可以使用require-context()方法，详见。
我们约定一个规则就是路由文件由export default抛出路由配置，代码也是判断是否是由export default来筛选导入的。
src/utils/require-dir.js
export function requireDir(files, expendFiles = ['./index.js']) {
let list = []
files.keys().forEach(key => {
if (expendFiles.includes(entryFile)) return
// 必须是export default
if (files(key).default) {
list = list.concat(files(key).default)
}
})
return list
}src/router/index.js
// 获取module文件里的路由
import { requireDir } from '@/utils/require-dir.js'
const routers = requireDir(require.context('./module', true, ['./index.js'])
//然后使用 ...routers 添加到路由里边同样，mockapi也可以使用这种方法来批量导入文件。
值得注意的是直接使用require.context会报错（require.context is not a function），这是因为项目中webpack不认这个文件，我们可以通过外部导入来引用这个功能。
cnpm install --save-dev require-context
使用上述方法
mock/index.js
import { requireDir } from '../src/utils/require-dir.js'
const requireContext = require('require-context');
const apiList = requireDir(requireContext('../../mock', true, /\.js$/), ['index.js','mock-server.js'])
const mocks = [
... apiList
]要注意的是，此时requireContext的当前目录是node_modules/_require-context…根据当前目录找到mock
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅谈vue-cli 3.0.x 初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue 自动生成swagger接口请求文件的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了理顺8个版本vue的区别(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最近vue项目中遇到了需求,客户端需要实现以excel表格形式下载数据,这篇文章主要给大家介绍了关于vue下载excel文件的四种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了在vue-cli搭建的项目中增加后台mock接口的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家介绍了代理模式在vue中的使用示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了vue中添加与删除，关键字搜索功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
vue3插槽:el-table表头插入tooltip及更换表格背景色方式
这篇文章主要介绍了vue3插槽:el-table表头插入tooltip及更换表格背景色方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
这篇文章主要介绍了vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue剔除数组指定位置元素的几种方法,文中主要介绍了单个去除和批量去除这两种方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下2024-03-03
最新评论